Product Page Changes | Add to cart + select options + other misc

[serieux]

Hi There,

There are several changes I would like to make to the product page to make it easier for customers to purchase:

1) when selecting size, I want the text within the box to be “SELECT SIZE” instead of “CHOOSE AN OPTION”.

2) I want to change to ” CHOOSE AN OPTION ” Box. I would like the Box to be changed to a solid black colour with the words being changed to white.

3) As 2), I would like to change the “ADD TO CART” button to a solid colour with white text.

4) I would like to add in text next to the wish list icon within the Box – ” ADD TO WISH LIST”

5) I would like to add more space between the ADD to card button and the wish list button.

Your prompt reply will be appreciated.

Thanks,

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

1) Upload and activate your supplied child theme, inside the child theme functions.php file please add this:

function sf_wc_filter_dropdown_args( $args ) {
    $variation_tax = get_taxonomy( $args['attribute'] );
    $prefix_text = __( 'Select ', 'swiftframework' );
    $prefix_text .= $variation_tax->labels->name;
    $args['show_option_none'] = apply_filters( 'the_title', $prefix_text );
    return $args;
}
add_filter( 'woocommerce_dropdown_variation_attribute_options_args', 'sf_wc_filter_dropdown_args' );

2,3,4,5) Please add this CSS to your theme options => custom CSS

.woocommerce div.product form.cart .variations select {
    background-color: #000!important;
    color: #fff;
    border-color: #000!important;
}

.woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt:disabled[disabled], .woocommerce #respond input#submit.alt:disabled[disabled]:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt:disabled[disabled], .woocommerce a.button.alt:disabled[disabled]:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt:disabled[disabled], .woocommerce button.button.alt:disabled[disabled]:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt:disabled[disabled], .woocommerce input.button.alt:disabled[disabled]:hover {
		background-color: #000!important;
	    color: #fff!important;
	    border-color: #000!important;
}

.woocommerce .cart .yith-wcwl-add-to-wishlist a i:after {
   		content: " Add to wishlist";
       font-family: Lato;
       font-size: 12px;
       text-transform: uppercase;
       letter-spacing: 1px;
       font-weight: bold;
       vertical-align: 4px;
       margin-left: 5px;
}

.yith-wcwl-add-button>a i { 
	width: auto;
}

.woocommerce .cart .yith-wcwl-add-to-wishlist, 
.yith-wcwl-add-to-wishlist.oos {
    margin-left: 40px;
}

Thanks.