[Resolved] Woocommerce Single Product Layout with 3 columns

Hi there,

not sure, it would probably take custom development.
Do you have a shop set up with the content you want displayed on the single product ? If so can i see it and ill take a look at its easy enough for us to assist with.

And for Mobile – i assume the current layout is correct ?

Ok, so we can add some HTML into the template. To create our 2 column <div>s.
And we can use the Hooks that Woo provides in the single post. Specifically the woocommerce_single_product_summary hook.

See here:

https://github.com/woocommerce/woocommerce/blob/3611d4643791bad87a0d3e6e73e031bb80447417/plugins/woocommerce/templates/content-single-product.php#L60

You can see there are already a lot of templates callbacks made from that hook.
For example the woocommerce_template_single_title is hooked in with priority of 5
And the woocommerce_template_single_add_to_cart is hooked in with a priorty of 30

So we can hook in before and after those with this PHP Snippet:

// hook in open left column div at 1 before all other callbacks
add_action('woocommerce_single_product_summary',function(){
    ?>
    <!-- open summary-left-column -->
    <div class="summary-left-column">
    <?php
},1);
// hook in closing left column div at 25 before the cart form
add_action('woocommerce_single_product_summary',function(){
    ?>
    <!-- close summary-left-column -->
    </div>
    <?php
},25);
// open right hand column div at 26 just after our left column div and the cart form
add_action('woocommerce_single_product_summary',function(){
    ?>
    <!-- open summary-right-column -->
    <div class="summary-right-column">
    <?php
},26);
// close our right hand column div at end of summary
add_action('woocommerce_single_product_summary',function(){
    ?>
    <!-- close summary-right-column -->
    </div>
    <?php
},1000);

this will add your 2 columns around the content.
If you’re hooking other content into the same hook, then you just need to consider its priority.
Lower than 25 for left column
Greater than 26 for right column

And you can make them side by side with some CSS:

@media(min-width: 769px) {
    .woocommerce-page div.product div.summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px
    }
}

Glad to be of help