[Support request] WooCommerce Border Between Product Description and Releated Products Box

Home Forums Support [Support request] WooCommerce Border Between Product Description and Releated Products Box

Home Forums Support WooCommerce Border Between Product Description and Releated Products Box

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #609347
    Mike

    Hello,

    I am trying to create a full width border between my woo commerce product description and the related products box.

    The problem I have when setting the border-top of the related products box to 1px is that its not the full page width as the footer border-top is.

    So it means that the line further down is longer and it looks wrong.

    I need the line to be the same width as that of the page with 25px either side, just as it set in the footer.

    A real challenge I suspect!

    Thanks,
    Mike

    #609369
    David
    Staff
    Customer Support

    Hi Mike,

    simplest way would be to remove the Related Products from Customiser > Layout > Woocommerce > Single Product.

    And then add this PHP to the before footer hook in GP Hooks:

    <?php if ( is_woocommerce() && is_product() ) { ?>
    	<div class="site-footer relate-products-hook">
    		<?php echo do_shortcode('[related_products]'); ?>
    	</div>
    <?php }?>

    Check Execute PHP and save.

    The shortcode is wrapped with the site-footer class so will inherit the top border and side padding. The relate-products-hook is just a custom class in case you want to target the container serparately.

    #609393
    Mike

    Hello David,

    That kind of worked. I now have the problem that the table does not display correctly anymore and it is still getting the top line despite me removing the code, I suspect this is beacuse it is inheriting the footer CSS.

    Any ideas how to solve this?

    Thanks,
    Mike

    #609395
    David
    Staff
    Customer Support

    Hi Mike, thats really odd – the before_footer hook shouldn’t be inside the footer….. try moving the code to the after content hook. If still no joy then remove the site-footer class and apply the same styles to the relate-products-hook

    #609403
    Mike

    Hello,

    I found half the problem! I had put the code into the before footer content hook and not the before footer hook.

    However it still seems to be having issues, it is still only displaying three columns on one row and then pushing the forth below it!

    Very odd!

    Any ideas?

    Thanks,
    Mike

    #609408
    David
    Staff
    Customer Support

    Try adding this CSS:

    .woocommerce .relate-products-hook .related ul.products li.product {
    	width: 21.2%;
    }
    #609411
    Mike

    Hello,

    That CSS worked a treat! I encased it in a media query so that on mobile it still displayed stacked.

    
    @media (min-width: 767px) {
    
    .woocommerce .relate-products-hook .related ul.products li.product {
    	width: 21.2%;
    }
    	
    }
    

    Help much appreciated!

    Thanks,
    Mike

    #609413
    David
    Staff
    Customer Support

    You’re welcome Mike, wasn’t too painful after all 😉 Glad to be of assistance

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.