Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Need code for side by side variants and add to cart (in a grid of 4).



  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

  • 0
46 minutes ago, Peter550 said:

Site URL: https://www.saccostyle.com/

I would like to have the variants 'Size' & 'colour' side by side, and below it have the 'quantity' and 'add to cart' side by side. so its like in a grid of 4? What is the custom CSS for this? 



Screen Shot 2021-05-19 at 22.59.57.png

Hi. you can use below code for it. copy/paste code into CSS editor

@media (min-width: 768px) {
    .ProductItemVariants {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;

        .ProductItem-product-price {
            flex-basis: 100% !important;
        .ProductItem-details-excerpt {
            flex-basis: 100% !important;
            order: 2;
        .product-variants {
            flex-basis: 100% !important;
            .variant-option {
                margin: 0 10px 0 0;
        .product-quantity-input {
            flex-basis: 49% !important;
            margin-right: 10px !important;
        .sqs-add-to-cart-button-wrapper {
            flex-basis: 48% !important;

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...