[Resolved] Basket And Checkout Page Woocommerce Cart Form

Home Forums Support [Resolved] Basket And Checkout Page Woocommerce Cart Form

Home Forums Support Basket And Checkout Page Woocommerce Cart Form

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #619392
    _blank

    On these two pages I’d like to customize the colours and the coupon wording.

    WOOCOMMERCE CART FORM
    •The text headings on the table for Product, Price, Quantity etc.
    I’d like to change these to Dark Blue #005780

    • Background panel and thin rules (light grey colour)
    I’d like to change these to light blue #dee7f2

    • the red X to dark blue.

    I’d like these to the same for the Checkout Page.

    COUPON BUTTONS & UPDATE
    Is there a way to change “Coupon code” to “Promo code” and then change the “APPLY COUPON” button to “APPLY CODE”.

    On the UPDATE BASKET I’d like the colours to be same as the “APPLY COUPON” button.
    Are these editable under GP settings in Customizer.

    I’ve uploaded a visual to my site to help and show what I mean.
    website-url/wp-content/uploads/2018/07/basket-page-overlay.png

    Many Thanks
    Scott

    #619505
    David
    Staff
    Customer Support

    Hi Scott – here are the CSS requirements they will roll over to the checkout as well:

    /* Cart titles color */
    .woocommerce table.shop_table th {
    	color: #005780;
    }
    /* Table Top row background and table row borders */
    .woocommerce table.shop_table th {
    	background: #dee7f2;
    }
    .woocommerce table.shop_table td {
    	border-color: #dee7f2;
    }
    
    /* Cart remove button colors */
    .woocommerce a.remove {
    	color: #005780 !important;
    }
    .woocommerce a.remove:hover {
    	background: #005780;
    }

    Button colors can be changed in the Customiser > Colors > Woocommerce.
    Note the Update Cart button is set to a lower opacity until the a change is made.

    EDIT. Filter for changing coupon code placeholder and button:

    // rename the coupon field on the cart page
    function woocommerce_rename_coupon_field_on_cart( $translated_text, $text, $text_domain ) {
    	// bail if not modifying frontend woocommerce text
    	if ( is_admin() || 'woocommerce' !== $text_domain ) {
    		return $translated_text;
    	}
    	
    	if ( 'Coupon code' === $text ) {
    		$translated_text = 'Promo code';
    	}
    		if ( 'Apply coupon' === $text ) {
    		$translated_text = 'Apply Promo Code';
    	}
      
    	return $translated_text;
    }
    add_filter( 'gettext', 'woocommerce_rename_coupon_field_on_cart', 10, 3 );
    #620165
    _blank

    Hi David

    Thanks worked perfectly.
    If i wanted to change the slightly light blue background colour to white. The one behind the product details and basket totals. Can you tell me how to do that.

    Many Thanks
    Scott

    #620179
    David
    Staff
    Customer Support

    Hi Scott, add background-color: #fff; to this rule:

    .woocommerce table.shop_table td {
    	border-color: #dee7f2;
    }
    #620185
    _blank

    Brilliant thanks. All customised now until the client reviews it!
    Scott

    #620305
    David
    Staff
    Customer Support

    You’re welcome. Clients hey 😉

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.