ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• February 29, 2016 at 10:22 pm #252781
  serieux

  Member

  Post count: 112

  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.
  March 2, 2016 at 11:56 am #253133
  David Martin – Support

  Moderator

  Post count: 20834

  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.

• Back to forum

  Posted in: Atelier