1. Is it possible to make the product selector as a dropdown instead of seperate boxes next to each other? See the example below from another WordPress site.
2. Is it possible to make a button with both round and "not round" corners and the "fancy border" like the one shown below?
Hi,
1. You can translate all the WooCommerce text by going to Appearance → Customize → WooCommerce Text Translations,
2. Navigate to WooCommerce → Colors: change the color of buttons in this section,
3. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
.variations_form ul.jquery-grid-picker-widget li.jquery-grid-picker-item a {border-radius: 10px;
}
Change 10px to the value you want to show.
Regards,
PenciDesign.
Thanks for your answers. It was helpful.
I have some additional questions:
1. Is it possible to make the product selector as a dropdown instead of seperate boxes next to each other? See the example below from another WordPress site.
2. Is it possible to make a button with both round and "not round" corners and the "fancy border" like the one shown below?
Hi,
1. Please go to Appearance → Customize → WooCommerce → Single Product: turn off the "Convert select into the button" option,
2. Navigate go to Appearance → Customize → Custom CSS then add the following custom CSS code:
.woocommerce div.product form.cart .button {box-shadow: 0 0px 0px 2px rgba(255,255,255,1) inset;
-webkit-box-shadow: 0 0px 0px 2px rgba(255,255,255,1) inset;
-moz-box-shadow: 0 0px 0px 2px rgba(255,255,255,1) inset;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border: 2px solid var(--pcpage_btn_atc_bg_cl);
} .woocommerce div.product form.cart .button:hover {
border-color: var(--pcpage_btn_atc_bg_hv_cl);
}
Regards,
PenciDesign.