customise product selection boxes.

Site URL: https://www.sundayseltzer.co.uk/mixed-eight/p/mixedeight

hi there.

does anyone know how to customise the 'product selection' and 'quantity' boxes? I would like to have them match the 'add to cart' box.

any help would be greatly appreciated.

regards,

Elvin

You mean reduce height, round border?

On 10/25/2020 at 3:24 PM, tuanphan said:

You mean reduce height, round border?

hi @tuanphan yes reduce height and round the corners. thanks

8 hours ago, sundayseltzer said:

hi @tuanphan yes reduce height and round the corners. thanks

I don't see variant dropdown?

To apply for Quantity, add this to Home > Design > Custom CSS

.product-quantity-input input {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-radius: 5px !important;
    border-width: 2px !important;
}

Also, some feedback your site.

1. Tablet. 

I think you can increase variant dropdown with, it will be better.

Add this to Home > Design > Custom CSS

/* variant dropdown size */
@media screen and (max-width:991px) and (min-width:768px) {
.ProductItem-details .product-variants {
    width: 100%;
}
}

2. Tablet. Footer is not very good, some text is break new line in ugly position.

I think you can increase column width, or change to 2 columns/row with Row 1: Contact Info + Socials - Row 2: Sponsorship - T & C.

What do you think? I will give the code.

3. Tablet. Home products button not align. If you want align, add this to Home > Design > Custom CSS

/* Align home products button */
@media screen and (max-width:991px) and (min-width:768px) {
.homepage a.product-title {
    min-height: 50px;
}
}

4. Some other problems, you can fix above then let me know, I will continue sending the code.

• 4.1. Tablet menu has 2 items only. I think you can convert to normal menu (need custom code!)
• 4.2. Tablet: Click Shop > It show Drinks, Merch >> I suggest you can show both 2 items under Shop, without clicking (I solved this for 2 members, if you want, I will give the code here).
• 4.3. Similar 4.2, on Mobile
• 4.4. Product Detail show number 1/3 on thumbnail. You can add Arrow Slider, customers will find it easier to navigate to the images. (use below code)

4.4. Add to Home > Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;
}
}

here is result