Template Question
-
We have inherited supporting a website and have a question about the Categories page template. We recently moved this site to a staging site and we also updated the core, WooCommerce and some of the plugins. We notice when testing that the link on for the products on the Category pages are not working correctly. The link that used to wrap the entire div that should contain the single product image, title and price, does not wrap that area anymore. We can see in inspect element exactly what is wrong we just can’t find the correct files to fix the issue. We are assuming that the Category page is pulling in the wrong template or component for this part of the page, but we can’t find it.
The link to one of the category pages is https://americankitchencookware.cloudaccess.host/product-category/frying-pans-skillets/
Hover your cursor over any product and you will see that the products are not linked.
Any help you can give us would really help us speed up the process of updating the live site. Thanks
-
Seems there may just be some hooks missing in your theme’s template files.
I’d suggest first getting the latest version of that theme, otherwise comparing the files in yourtheme/woocommerce/ with the latest versions in our plugin https://github.com/woothemes/woocommerce/tree/2.5.3/templates
Thanks for the information. The theme is updated and everything else is updated except some premium plugins that we will update if necessary.
If it possible to tell give me a narrower focus as to which files I will be looking for or looking at. You said there is probably an issue with some hooks missing. Could you suggest which files I compare first. We have been looking through the files in our install and have been running tests to see if we can find the specific file, but we have not been particularly successful.
Thanks
Hello,
Sorry I am not sure, but this does not seem to be the issue. I have check that file and it is identical to the file we have. It seem to be to be an issue with the order in which things are being called to the page.
This this the code on the page that is not working:
<li class="first post-279 product type-product status-publish has-post-thumbnail product_cat-saute-pans-and-other-cookware taxable shipping-taxable purchasable product-type-simple product-cat-saute-pans-and-other-cookware instock"> <!----------------- as you can see this link should be within the div class="wpb_wl_preview_area" and should wrap down to the closing span tag at price ---------------------> <a href="https://americankitchencookware.cloudaccess.host/product/10-inch-stainless-steel-saute-pan/"></a> <div class="wpb_wl_preview_area"><a href="https://americankitchencookware.cloudaccess.host/product/10-inch-stainless-steel-saute-pan/"></a><a class="wpb_wl_preview open-popup-link" href="#wpb_wl_quick_view_279" data-effect="mfp-zoom-in">Quick View</a></div><img width="350" height="350" src="https://americankitchencookware.cloudaccess.host/wp-content/uploads/2015/12/10-inch-stainless-steel-saute-pan-picture-350x350.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="Get a larger surface area for cooking with this 10 inch stainless steel saute pan." srcset="https://americankitchencookware.cloudaccess.host/wp-content/uploads/2015/12/10-inch-stainless-steel-saute-pan-picture-150x150.jpg 150w, https://americankitchencookware.cloudaccess.host/wp-content/uploads/2015/12/10-inch-stainless-steel-saute-pan-picture-300x300.jpg 300w, https://americankitchencookware.cloudaccess.host/wp-content/uploads/2015/12/10-inch-stainless-steel-saute-pan-picture-350x350.jpg 350w, https://americankitchencookware.cloudaccess.host/wp-content/uploads/2015/12/10-inch-stainless-steel-saute-pan-picture.jpg 800w" sizes="(max-width: 350px) 100vw, 350px"><h3>10-inch Premium Stainless Steel Sauté Pan</h3> <span class="price"><span class="amount">$109.99</span> <small class="woocommerce-price-suffix">including sales tax</small></span> <div id="wpb_wl_quick_view_279" class="mfp-hide mfp-with-anim wpb_wl_quick_view_content wpb_wl_clearfix"> <div class="wpb_wl_images"> <a href="https://americankitchencookware.cloudaccess.host/wp-content/uploads/2015/12/10-inch-stainless-steel-saute-pan-picture.jpg" itemprop="image" class="woocommerce-main-image zoom" title="Get a larger surface area for cooking with this 10 inch stainless steel saute pan." data-rel="prettyPhoto"><img width="800" height="800" src="https://americankitchencookware.cloudaccess.host/wp-content/uploads/2015/12/10-inch-stainless-steel-saute-pan-picture.jpg" class="attachment-shop_single size-shop_single wp-post-image" alt="Get a larger surface area for cooking with this 10 inch stainless steel saute pan." title="Get a larger surface area for cooking with this 10 inch stainless steel saute pan." srcset="https://americankitchencookware.cloudaccess.host/wp-content/uploads/2015/12/10-inch-stainless-steel-saute-pan-picture-150x150.jpg 150w, https://americankitchencookware.cloudaccess.host/wp-content/uploads/2015/12/10-inch-stainless-steel-saute-pan-picture-300x300.jpg 300w, https://americankitchencookware.cloudaccess.host/wp-content/uploads/2015/12/10-inch-stainless-steel-saute-pan-picture-350x350.jpg 350w, https://americankitchencookware.cloudaccess.host/wp-content/uploads/2015/12/10-inch-stainless-steel-saute-pan-picture.jpg 800w" sizes="(max-width: 800px) 100vw, 800px"></a> </div> <div class="wpb_wl_summary"> <!-- Product Title --> <h2 class="wpb_wl_product_title">10-inch Premium Stainless Steel Sauté Pan</h2> <!-- Product Price --> <span class="price wpb_wl_product_price"><span class="amount">$109.99</span> <small class="woocommerce-price-suffix">including sales tax</small></span> <!-- Product short description --> <div itemprop="description"> <p>Whether searing tender salmon fillets, braising a pot roast, or creating a chicken cacciatore your friends and family will rave about, you’ll want this pan every time.</p> <h6>Order now and get free shipping, anywhere in the contiguous U.S.!</h6> </div> <!-- Product cart link --> <p class="stock in-stock">In stock</p> <form class="cart" method="post" enctype="multipart/form-data"> <div class="quantity"> <input type="number" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4"> </div> <input type="hidden" name="add-to-cart" value="279"> <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button> </form> </div> </div> <a rel="nofollow" href="/product-category/saute-pans-and-other-cookware/?add-to-cart=279" data-quantity="1" data-product_id="279" data-product_sku="AK010-FP" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a> </li> <!---------this is the code from the live site that works correctly-------> <li class="first post-271 product type-product status-publish has-post-thumbnail product_cat-saucepans-stock-pots taxable shipping-taxable purchasable product-type-simple product-cat-saucepans-stock-pots instock"> <div class="wpb_wl_preview_area"><a class="wpb_wl_preview open-popup-link" href="#wpb_wl_quick_view_271" data-effect="mfp-zoom-in">Quick View</a></div> <!--------- a tag here wraps the img tag and closes on the outside of the pricing span -----------------------------------------------> <a href="https://americankitchencookware.com/product/2-quart-stainless-steel-sauce-pan/"> <img width="350" height="350" src="https://americankitchencookware.com/wp-content/uploads/2015/12/2-quart-stainless-steel-saucepan-picture-350x350.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="Cook a variety of dishes and sauces with this 2 quart stainless steel saucepan." srcset="https://americankitchencookware.com/wp-content/uploads/2015/12/2-quart-stainless-steel-saucepan-picture-150x150.jpg 150w, https://americankitchencookware.com/wp-content/uploads/2015/12/2-quart-stainless-steel-saucepan-picture-300x300.jpg 300w, https://americankitchencookware.com/wp-content/uploads/2015/12/2-quart-stainless-steel-saucepan-picture-350x350.jpg 350w, https://americankitchencookware.com/wp-content/uploads/2015/12/2-quart-stainless-steel-saucepan-picture.jpg 800w" sizes="(max-width: 350px) 100vw, 350px"><h3>2-quart Premium Stainless Steel Saucepan</h3> <span class="price"><span class="amount">$109.99</span></span> </a> <!------------ closing tag ----------------------> <div id="wpb_wl_quick_view_271" class="mfp-hide mfp-with-anim wpb_wl_quick_view_content wpb_wl_clearfix"> <div class="wpb_wl_images"> <a href="https://americankitchencookware.com/wp-content/uploads/2015/12/2-quart-stainless-steel-saucepan-picture.jpg" itemprop="image" class="woocommerce-main-image zoom" title="Cook a variety of dishes and sauces with this 2 quart stainless steel saucepan." data-rel="prettyPhoto"><img width="800" height="800" src="https://americankitchencookware.com/wp-content/uploads/2015/12/2-quart-stainless-steel-saucepan-picture.jpg" class="attachment-shop_single size-shop_single wp-post-image" alt="Cook a variety of dishes and sauces with this 2 quart stainless steel saucepan." title="Cook a variety of dishes and sauces with this 2 quart stainless steel saucepan." srcset="https://americankitchencookware.com/wp-content/uploads/2015/12/2-quart-stainless-steel-saucepan-picture-150x150.jpg 150w, https://americankitchencookware.com/wp-content/uploads/2015/12/2-quart-stainless-steel-saucepan-picture-300x300.jpg 300w, https://americankitchencookware.com/wp-content/uploads/2015/12/2-quart-stainless-steel-saucepan-picture-350x350.jpg 350w, https://americankitchencookware.com/wp-content/uploads/2015/12/2-quart-stainless-steel-saucepan-picture.jpg 800w" sizes="(max-width: 800px) 100vw, 800px"></a> </div> <div class="wpb_wl_summary"> <!-- Product Title --> <h2 class="wpb_wl_product_title">2-quart Premium Stainless Steel Saucepan</h2> <!-- Product Price --> <span class="price wpb_wl_product_price"><span class="amount">$109.99</span></span> <!-- Product short description --> <div itemprop="description"> <p>From cooking oatmeal at breakfast time to steaming vegetables and warming soups for lunch and dinner, you’ll want this pan at your fingertips.</p> <h6>Order now and get free shipping, anywhere in the contiguous U.S.!</h6> </div> <!-- Product cart link --> <p class="stock in-stock">In stock</p> <form class="cart" method="post" enctype="multipart/form-data"> <div class="quantity"><input type="number" step="1" min="1" max="994" name="quantity" value="1" title="Qty" class="input-text qty text" size="4"></div> <input type="hidden" name="add-to-cart" value="271"> <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button> </form> </div> </div> <a href="/product-category/saucepans-stock-pots/?add-to-cart=271" rel="nofollow" data-product_id="271" data-product_sku="AK002-SP" data-quantity="1" class="button add_to_cart_button product_type_simple">Add to cart</a> </li>
I am not sure if this helps narrow the search or if what you have given me should be the answer and I am just not seeing it. I am also really at this point not sure if this will help you to help us narrow our search. ??
Thanks
Hello,
Sorry I am not sure, but this does not seem to be the issue. I have check that file and it is identical to the file we have. It seem to be to be an issue with the order in which things are being called to the page.
This this the code on the page that is not working:
[Large code excerpt removed by moderator per forum rules. Please use Pastebin for all large code excerpts. It works better anyway.]
I am not sure if this helps narrow the search or if what you have given me should be the answer and I am just not seeing it.
woocommerce_before_shop_loop_item and woocommerce_after_shop_loop_item might be missing. Those are the important hooks for links.
Although, it could also be that your theme adds links to other items inside each product. You cannot have a link within a link – this will break the HTML and disable the outer product link.
Again I am confused.
The second set of code commented as
<!———this is the code from the live site that works correctly——->
in the above description does not have any links within links that I can see. The first li in the example above is from the broken site (the staging site) the second li that comes after the comment is from the live site. This code was pulled from inspect element. I can’t compare the code from the live site and the staging site if I can’t find the code or if I don’t know how it is generated.
I am trying to narrow down where I might be able to find the files that generate that li and fix them. I have found files like those, but when I change them they do not change the pages. Is is possible to narrow down which files or file names I need to look at. I will do more research on the hooks and how they maybe possibly causing my issues, but for now. If I could find the files, I feel fairly confident I could fix this.
If you have any insights on the specific files that are related in generating this code on the Category page it would be super helpful
Thanks
There are links within wpb_wl_images. Surely these would be within the outer link?
Have you raised this with the theme author yet anyway?
- The topic ‘Template Question’ is closed to new replies.