How to change “Selection Options” to Add to Cart- WordPress & Woo-commerce

Code snippets

Copy this code and paste it in to additional css on your wordpress theme

 
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”light” language=”css” wrapped=”no” height=”500px” copy-text=”Get the Code!” copy-confirmed=”You have it!”]body {    font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;    font-size: 14px;    line-height: 1.42857143;   color: #ffffff;    background-color: #000;}.page .content-page a:not(.elementor-button) {    text-decoration: initial;      text-decoration-color: initial;}h1, h2, h3, h4, h5, h6 {    color: white;}.wc-block-grid__product-title {    font-family: inherit;    line-height: 1.2em;    font-weight: 1000;    color: inherit;    font-size: 15px;    text-align: left;text-decoration: none;}.wc-block-grid__product-price { display: block;    font-size: 14px;    text-align: left;}.wc-block-grid__product .wc-block-grid__product-image, .wc-block-grid__product .wc-block-grid__product-title {    margin: 0 0 0px;}.wc-block-grid__product-add-to-cart.wp-block-button {     display: table-cell;    font-size: 14px}.wp-block-button__link {    color: #fff;    background-color: #a018cc;    cursor: pointer;    font-size: 15px;    padding: .667em 1.333em;    text-align: center;    overflow-wrap: break-word;}.woocommerce div.product p.price, .woocommerce div.product span.price {    color: #e0e0e0;    font-size: 16px;    font-weight: 700;}.woocommerce ul.products li.product .button, .woocommerce .widget_price_filter .price_slider_amount .button, .single_add_to_cart_button, .woocommerce a.button, .woocommerce button.button {    color: #fff !important;    background: purple!important;}.panel {    margin-bottom: 20px;    background-color: #000000;    border: 1px solid transparent;    border-radius: 4px;    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);}.woocommerce div.product .woocommerce-tabs ul.tabs li.active {    background: #000000;    transition: .4s;}[/dm_code_snippet]
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”light” language=”php” wrapped=”no” height=”500px” copy-text=”Get the Code!” copy-confirmed=”You have it!”] add_filter( ‘woocommerce_product_add_to_cart_text’ , ‘custom_woocommerce_product_add_to_cart_text’ ); function custom_woocommerce_product_add_to_cart_text() { global $product; $product_type = $product->product_type; switch ( $product_type ) { case ‘variable’: return __( ‘Add to Cart’, ‘woocommerce’ ); break; } } [/dm_code_snippet]

White Background CSS

body {

font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;

font-size: 14px;

line-height: 1.42857143;

color: #ffffff;

background-color: white;

}

.page .content-page a:not(.elementor-button) {

text-decoration: initial;

text-decoration-color: initial;

}

h1, h2, h3, h4, h5, h6 {

color: white;

}

.wc-block-grid__product-title {

font-family: inherit;

line-height: 1.2em;

font-weight: 1000;

color: inherit;

font-size: 15px;

text-align: left;

text-decoration: none;

}

.wc-block-grid__product-price {

display: block;

font-size: 14px;

text-align: left;

}

.wc-block-grid__product .wc-block-grid__product-image, .wc-block-grid__product .wc-block-grid__product-title {

margin: 0 0 0px;

}

.wc-block-grid__product-add-to-cart.wp-block-button {

display: table-cell;

font-size: 14px

}

.wp-block-button__link {

color: #fff;

background-color: #a018cc;

cursor: pointer;

font-size: 15px;

padding: .667em 1.333em;

text-align: center;

overflow-wrap: break-word;

}

.woocommerce div.product p.price, .woocommerce div.product span.price {

color: #e0e0e0;

font-size: 16px;

font-weight: 700;

}

.woocommerce ul.products li.product .button, .woocommerce .widget_price_filter .price_slider_amount .button, .single_add_to_cart_button, .woocommerce a.button, .woocommerce button.button {

color: #fff !important;

background: purple!important;

}

.panel {

margin-bottom: 20px;

background-color: #000000;

border: 1px solid transparent;

border-radius: 4px;

-webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);

box-shadow: 0 1px 1px rgb(0 0 0 / 5%);

}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {

background: #000000;

transition: .4s;

}

Share the Post:

Related Posts

This Headline Grabs Visitors’ Attention

A short description introducing your business and the services to visitors.
Unlock Your Free Beats

Sign up to get free beats download