CODEWITHSUNDEEP
phpcsswordpresswoocommerceresponsive
Kai Craig
Kai Craig

Reputation: 21

Woocommerce - Scale Product Description & Attributes responsively

Hoping someone can help :)

In my product description I have managed (with some great help) to display my product description and attributes horizontally next to each other. However, now I'm trying to enable it so when on mobile they scale and display vertically instead of squishing together.

Not familiar with responsive css at all so any help will be really appreciated!

This is the code I have so far (in my functions.php):

add_filter( 'woocommerce_product_tabs', 'exetera_custom_product_tabs', 98, 1 );
function exetera_custom_product_tabs( $tabs ) { 
// Custom description callback.
$tabs['description']['callback'] = function() {
    global $post, $product;

    echo '<div class="description left" style="float:left;width:49%;">';

    // Display the content of the Description tab.
    the_content();
    
    echo '</div>';

    // Display the heading and content of the Additional Information tab.

    echo '<div class="specifications right" style="float:right;width:49%;">';

    echo '<h2>Specifications</h2>';

    do_action( 'woocommerce_product_additional_information', $product );
    
    echo '</div>';
};

// Remove the additional information tab.
unset( $tabs['additional_information'] );

return $tabs;

}

Upvotes: 0

Views: 120

Answers (1)

Alexander Z
Alexander Z

Reputation: 604

We need to wrap these blocks with descriptions in a container and set flex properties to it. Using flex, you can customize the display in columns, or left-right

HTML:

<div class="desc-container">
    <div class="description left"></div>
    <div class="specifications right"></div>
</div>

CSS

.desc-container {
  display:flex;
}

.description, .specifications {
  flex: 50%;
}

UPD: Your code will be like that:

add_filter( 'woocommerce_product_tabs', 'exetera_custom_product_tabs', 98, 1 );

function exetera_custom_product_tabs( $tabs ) { 

    // Custom description callback.
    $tabs['description']['callback'] = function() {
    
        global $post, $product;
    
        //Start of flex container
        echo '<div class="desc-container">';

        echo '<div class="description">';
        the_content();
        echo '</div>';

        echo '<div class="specifications">';
        echo '<h2>Specifications</h2>';
        do_action( 'woocommerce_product_additional_information', $product );
        echo '</div>';

        //End of flex container
        echo '</div>';
    };

    // Remove the additional information tab.
    unset( $tabs['additional_information'] );

    return $tabs;
}

And also don't forget add CSS rules.

Additional info you can try to find here: https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01

Upvotes: 1

Related Questions