I have a wordpress + woocommerce store. On the product page I want to display a carousel with similar products, but not in the bootstrap container of the theme, but to the full width of the page. Whatever position I set for the function of the standard hook

add_action('woocommerce_after_main_content', 'woocommerce_output_related_products');

anyway, similar items are displayed within the container. If I prescribe a shortcode in the footer, then as I understand it there is no link to a specific product and with this method there are few similar products (not even enough to fill the entire page width) ..

 <?php if (is_product()); ?> <section class="related-products"> <?php echo do_shortcode ('[related_products per_page="4"]'); ?> </section> <?php endif; ?>

Those. roughly speaking: if you pull a hook, then everything is output (say, 8 similar products), but in a container, and if a shortcode, then already full width, but only 2 - that’s the dilemma .. How to be?

  • one
    probably through js connect the php-script: something like this: var link = <? php echo $ _SERVER ["SERVER_NAME"];?>; that is, you create an after block on css and in js you insert the necessary content into it, you can create an element with a z-index below the main unit on pure js and create a php handler in js, and here is an article about this stackoverflow.com/questions / 1115310 / ... - user33274
  • one
    Here's an article on: w3schools.com/jsref/met_document_createattribute.asp - user33274
  • @LenovoID thanks, but rummaged deeper into the code and found the solution much easier) - Vasya 1:49 pm

1 answer 1

In general, in my case I found a simpler solution - I found a hook for which I managed to hook:

 add_action('footer_in_top_part','woocommerce_output_related_products',5);

Maybe someone thread is useful

  • Is this in the sense that you implemented it? - user33274
  • @LenovoID yes, only the footer_in_top_part hook footer_in_top_part embedded and I suspect that it is not native, so I wrote in my case, but the principle is that you need to look for hooks near the footer, for example, here Vasya
  • But please show an example of how it is implemented - the site is online - user33274