Jump to content

How to target a section ID within a section ID?

Recommended Posts

Site URL: https://onyxhive.com.au/cakes/p/custom

Hello,

The link:https://onyxhive.com.au/cakes/p/custom


I am trying to target a section ID within a section. For example the section id is section[data-section-id="608ab106b153c010dc12f69a"] but I want to target the right div class specifically Div class="ProductItem-details-checkout"

I want to rearrange the drop down menu, add to cart and description order on this page only.

My other products are fine, I already rearranged the order but it uses the universal class which alters all products and new products I may bring in.

How can I target only the "custom" page so the information on the right reads

Description > Drop down menus > Add to cart but leave the other products alone as I already coded them.

This is the order from what I coded but its not working for the "custom" page, its altering all product pages as the section ID is universal

//Product Page Order (custom)
section[data-section-id="608ab106b153c010dc12f69a"] .ProductItem-details .ProductItem-details-checkout {
    display: flex;
}
section[data-section-id="608ab106b153c010dc12f69a"] .ProductItem-details-excerpt {
    order: 2 !important;
}
section[data-section-id="608ab106b153c010dc12f69a"] .ProductItem-product-price {
    order: 2 !important;
}
section[data-section-id="608ab106b153c010dc12f69a"] .sqs-add-to-cart-button-wrapper {
    order: 3 !important;
}

Thanks

Edited by hasher22
Link to comment
  • Replies 1
  • Views 327
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Hi there, 

Have you tried removing the word section from the start?

//Product Page Order (custom)
[data-section-id="608ab106b153c010dc12f69a"] .ProductItem-details .ProductItem-details-checkout {
    display: flex;
}
[data-section-id="608ab106b153c010dc12f69a"] .ProductItem-details-excerpt {
    order: 2 !important;
}
[data-section-id="608ab106b153c010dc12f69a"] .ProductItem-product-price {
    order: 2 !important;
}
[data-section-id="608ab106b153c010dc12f69a"] .sqs-add-to-cart-button-wrapper {
    order: 3 !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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.