Activate WooCommerce Image Gallery and Modal on Archive Pages - php

I've scoured the internet and I know I can't be the only one. I've found this as a reference but it still does not work. I'm assuming it's because an older post and WooCommerce has changed: Activate Woocommerce image gallery features on shop archive page
I'm a bit familiar with WooCommerce so I thought I would be able to figure it out but I'm in over my head I think? I have a child theme. For the archive-product.php page I've updated the loop to pull the single-product template:
woocommerce_product_loop_start();
if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) {
the_post();
/**
* Hook: woocommerce_shop_loop.
*/
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'single-product' );
}
}
woocommerce_product_loop_end();
The page, with a little work, is essentially now what I need it to be:
The product image, no longer has the ability - like the gallery on an actual single-product page - to open in the lightbox modal. I'm assuming that's because the archive pages strip out that javascript. So I found another post: Activate Woocommerce image gallery features on shop archive page and that doesn't seem to work either. In the screenshot, you'll also notice the "Sizing Chart" which is supposed to open as a modal also, and not just list the information below it.
I'm at a loss and would love any help for anyone who has successfully done this. I wouldn't have thought it would be as difficult as it's proven to be, but here I am.

Related

Hook archive-product.php woocommerce (Overriding Issues)

I've tried all the solutions posted to StackOverflow and still no dice.
Woocommerce mentions that "archive-product" will not be able to be overwritten if you use woocommerce.php, so what is the correct way to loop woocommerce_content(); ? and still be able to edit archive-product? No matter what I do, I can't edit archive-product. I did have success with this, but this seems like bad practice;
if ( is_singular( 'product' ) ) {
woocommerce_content();
} else {
//For ANY product archive.
//Product taxonomy, product search or /shop landing
woocommerce_get_template( 'archive-product.php' );
}
Another solution most people find in function.php (which I already use)
function mytheme_add_woocommerce_support() {
add_theme_support( 'woocommerce' );
}
add_theme_support('woocommerce');
I haven't seen anyone asking about this in my hours of research and would love some help.
This is very vague and basically just tells you that you can't edit the archive-product (without any solution of how to do so)
https://docs.woocommerce.com/document/template-structure/

product description is not getting display after feature image - woocommerce shop

I am trying to make product short description below product feature image in the woocommerce shop page. I used the woocommerce shop hooks for the same. But the problem is, product description is getting displayed on top of the featured image. please see the image attached below.
Code Snipped in functions.php
function woocommerce_after_shop_loop_item_title_short_description() {
global $product;
if ( ! $product->get_short_description() ) return;
?>
<div itemprop="description">
<?php echo apply_filters( 'woocommerce_short_description', $product->get_short_description() ) ?>
</div>
<?php
}
add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_after_shop_loop_item_title_short_description', 5);
I searched and tried different solutions and tried different woocommerce shop hooks mentioned here: (woocommerce_shop_loop_item_title etc) https://www.tychesoftwares.com/woocommerce-shop-page-hooks-visual-guide-with-code-snippets/ but hard luck.
Also can somebody tell me how to set fixed featured image size in shop page using woocommerce hooks, so that it won't get distorted (In below image size is not same) Any help would be really appreciated.
Based on your screenshot and the fact that this also happens with the default Storefront theme I would guess you customized they way your product thumbnail is being called. Moving it from the woocommerce_before_shop_loop_item_title hook to the woocommerce_after_shop_loop_item_title hook.
In that case changing the priority would help. Please try the following:
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_after_shop_loop_item_title_short_description', 20 );
function woocommerce_after_shop_loop_item_title_short_description() {
global $product;
if ( $short_description = $product->get_short_description() ) {
printf( '<div itemprop="description">%s</div>', $short_description );
}
}

Wordpress everything after this slug / link

Is there a way to create the follow in Wordpress:
Hyperlink to page: www.localhost.com/products/
On this page there is a list with products
If the user click on a link the browser goes for example to:
www.localhost.com/products/book-cartoon-small
The problem is both are pages I want to split up this to productlist page "IS PAGE" and product page "IS SINGLE POST"
Is there somebody who knows how to create this with a statement?
$loop = new WP_Query(array('post_type' => 'product'));
while ( $loop->have_posts() ) : $loop->the_post();
if ( is_page('') ){
?>
Go to product
<?php
}else{// if is single post.
echo get_the_title();
echo the_content();
}
endwhile;
Maybe it is possible to create a if statement with everything after products/ to do this?
Create an archive page for your products with by setting 'has_archive' => true and creating a archive-product.php template file in your theme. Next add a single-product.php template. Do no forget to reset your permalinks after adding the archive. That should give you a start.
A turorial can be found here https://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-post-types-archive-page-in-wordpress/
And do not forget to check on the wordpress stack exchange. https://wordpress.stackexchange.com/

Woocommerce shop page custom template

As I understand by default Woocommerce shop page uses product archive template. What I am looking for, is to use a custom template for shop page.
Here is what I did:
Create template "my-shop"
Create page "My shop" -> choose template "my-shop"
Choose "My shop" as Woocommerce shop page
But none of the changes I made to "my-shop" template are present on the shop page.
What am I missing here? I would not like to change product archive itself, just the shop page.
Is there a way to disable product archive from being a default for shop page?
Thanks
I know it's too late and you may have figured it out by now. In any case, the changes that you would like to make to the WooCommerce Shop Page need to be done in the archive-product.php and it would be safer to create a child theme and do these changes. Making enhancements and customizations in a Child theme is best practice so that you can update the parent theme at any time and it won't affect your store.
I hope this helps, for more information on how you can use WooCommerce short-codes to customize your store can be found here.
To add to Silver Ringvee's answer - he used is_page but that only works on wordpress pages. For woocommerce you need to use something like is_woocommerce() . See Woocommerce conditional tags page.
My example code uses the is_shop conditional tag as that was the page you wanted to change. the code get_template_part( 'content', 'shop' ); will call the file content-shop.php in your theme root folder. This code is to be added at the top of wp-content\themes\*theme*\woocommerce\archive-product.php that you can copy from wp-content\plugins\woocommerce\templates\archive-product.php
You can add it just before get_header( 'shop' ); line 23 in my file - and the entire page will be drawn from your template. If you want to keep the header of the shop page, then put this code after the get_header code. Remember to include a footer in your file as well
if (is_shop()) {
get_template_part( 'content', 'shop' );
} else {
#normal archive-product code here
}
The solution (not perfect) that I figured to work best, until someone finds a way to actually change the template from dashboard:
Adding:
<?php
if (is_page( 'Page Title' ) ):
# Do your stuff
endif;
?>
to content-product.php in my theme's woocommerce folder.
If you prefer to go with code, you can create a redirect from the original shop page to your page via wp_redirect.
add_action('template_redirect', 'bc_010101_redirect_woo_pages');
function bc_010101_redirect_woo_pages()
{
if (is_shop())
{
wp_redirect('your_shop_url_here');
exit;
}
}
More detailed tutorial can be found here
This is not possible to create custom template for shop page , just copy and paste woocommerce Templates into you theme folder and Try to work in content-product.php template .

How do you get woothemes shortcodes to work on an archive page of product attributes

I am not really sure how to ask this question, however if you have a look at this link you will see what I mean
http://www.skirentalwhistler.com/skill-level/beginner
You will see that the shortcodes for a [box] are not being executed.
If you browse a single product, the shortcode works fine - eg click on the first product called 'Compact' and you will see the [box] is executed into the grey box with one grey and one orange button in it.
Also, I have spent a few hours now trying to work out which template is creating this page. The page is a listing of all products with a certain product attribute value (attribute is skill-level and value is beginner)
I expected it to be archive-product.php but it doesn't seem to be, and I can't find any other file dealing with multiple products on a single page
Any help is appreciated!
When you are using a shortcode in a post, then the [box] syntax is what to use. However, if you are doing a shortcode in a template, you must execute the shortcode with php. Since your homepage appears to just display the short code instead of running it, then it is probably in a template. To execute a shortcode in a template, do this
<?php echo do_shortcode('[box]'); ?>
so for the one on your home page
<?php echo do_shortcode('[box size="small" style="rounded" border="full"]'); ?>
Ok, I have worked out how to do it.
Big thanks to chiliNUT for their help, as they helped me to keep going and going.... thus I gave them an uptick
Anyway, it was using the themes archive.php template (not the woocommerce plugin templates as I presumed). In archive.php, I changed the following line in the div class 'entry'
<?php if ( $woo_options[ 'woo_post_content' ] == "content" ) the_content(__( 'Read More...', 'woothemes' )); else the_excerpt(); ?>
to
<?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?>
It now works and doesn't seem to have broken anything else.

Categories