Okay
  Public Ticket #2836135
WooCOmmerce Product layout, swap two blocks
Closed

Comments

  •  1
    ggrass started the conversation
    July 28, 2021 at 8:00am

    Hi there,


    So I have created this layout for WooCOmmerce individual product with a bit of a workaround, which I think is very successful, but I would now like to swap the "dropdown info block" and "the add to cart+quantity block". (see screenshot attached)
    Also, we would like to remove the "Category: shop" at the boottom

    Can you let me know how to do this with css?

    Thanks,
    G

  •  2,961
    Andrew replied
    July 28, 2021 at 8:21am

    Hi G,

    Thanks for writing in.

    Unfortunately, that is not possible. It is only possible to swap the whole description field with the add to cart form.

    8811386618.png

    To remove the category, use the following CSS.

    .woocommerce div.product_meta {
    display: none;
}

    Regards,

  •  1
    ggrass replied
    July 28, 2021 at 8:26am

    Hi Andrew,

    Thanks for the swift reply, although that really isn't what we're looking for.

    Is there any option to make the product title+ product detail short description+ add to cart blocks sticky (see example website here: https://www.jurlique.com/au/calendula-redness-rescue-restorative-treatment-serum-CS.html)? 

    In this case, I could transfer Benefits, How to USe and Ingredients below the images, together with the rest of the WP bakery blocks I already have down there and it would really suit our needs!

    let me know what's possible,

    Thanks,
    G


  •  8,847
    Tahir replied
    July 28, 2021 at 9:44am

    Hey Again,

    Use this to swap the divs as in your first message.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .product[data-tab-pos*="fullwidth"] .summary.entry-summary {
    display: flex;
    flex-direction: column;
}
.woocommerce div.product form.cart {
    order: 3;
}
.woocommerce-product-details__short-description {
    order: 4;
}

    Thanks

    ThemeNectar Support Team 

  •  1
    ggrass replied
    July 28, 2021 at 9:56am

    Hi there,

    Thanks. Unfortunately, that is not what we need. In my first message below, I was meaning to swap the toggle box with the cart block.

    The solution from my second message (sticky product details short description, as per the website shown at the link provided) would be a workaround. Can you advise on that, please?

    Many thanks,
    G

  •  8,847
    Tahir replied
    July 28, 2021 at 9:59am

    -Making a div Sticky would not be possible with CSS alone. 

    - Use this revised CSS:

    .product .summary.entry-summary {
    display: flex;
    flex-direction: column;
}
.woocommerce div.product form.cart {
    order: 3;
}
.woocommerce-product-details__short-description {
    order: 4;
}
    1370254776.pngClick on Image to View Larger

    Thanks

    ThemeNectar Support Team 

  •  1
    ggrass replied
    July 28, 2021 at 10:05am

    I'm sorry, maybe I am not making myself clear.
    I've edited the CSS but it still doesn't do what I require. Is the order in the screenshot provided possible?

    Thanks,
    G

  •  8,847
    Tahir replied
    July 28, 2021 at 10:07am

    No, I am afraid that's not possible as the 1 and 3 are wrapped in a single div : 

    5158382368.pngClick on Image to View Larger

    Thanks 

    ThemeNectar Support Team