Coupon Buttton - Cart Page

strobley · August 16, 2018, 5:45pm

Hi Themeco,

Pro 2.2.5
X 2.2.5
WooCommerce: 3…4.4
Wordpress: 4.9.8

There appears to an additional Apply Coupon button being added on the WooCommerce cart page and I’d like to remove it.

Using Storefront theme, or any native WP theme the code for Apply Coupon button is only in the div class=“coupon” block:

<tr>
    <td colspan="6" class="actions">
        <div class="coupon">
            <label for="coupon_code">Coupon:</label>
            <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="Coupon code">
            <button type="submit" class="button" name="apply_coupon" value="Apply coupon">Apply coupon</button>
        </div>
        <button type="submit" class="button" name="update_cart" value="Update cart" disabled="">Update cart</button>
        <input type="hidden" id="woocommerce-cart-nonce" name="woocommerce-cart-nonce" value="efb524cceb">
        <input type="hidden" name="_wp_http_referer" value="/cart/">
    </td>
</tr>

However on Pro/X the code is:

<tr>
    <td colspan="6" class="actions">
        <div class="coupon">
            <label for="coupon_code">Coupon:</label>
            <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="Coupon code" style="outline: none;">
            <button type="submit" class="button" name="apply_coupon" value="Apply coupon">Apply coupon</button>
        </div>
        <button type="submit" class="button" name="update_cart" value="Update cart" disabled="">Update cart</button>
        <button type="submit" class="button" name="apply_coupon" value="Apply Coupon">Apply Coupon</button>
        <input type="hidden" id="woocommerce-cart-nonce" name="woocommerce-cart-nonce" value="efb524cceb">
        <input type="hidden" name="_wp_http_referer" value="/cart/">
    </td>
</tr>

It creates an additional Coupon button after the Update cart and hides the defaults button in the div class=“coupon” block with the class which sets display: none;

.woocommerce .cart .actions .coupon label, 
.woocommerce .cart .actions .coupon input[type="submit"], 
.woocommerce .cart .actions .coupon button[type="submit"] {
    display: none;
}

I’ve checked the x/woocommerce pro/woocommerce files in the theme, there is nowhere I see this additional button as an override.

Please let me know how to remove this additional Apply Coupon button - not using CSS to actually cleanly remove it from the output code.

As I said, I know I can use display: none; for the additional button however, this is hacky - I would like the native WooCommerce clean code.

rad · August 16, 2018, 7:42pm

Hi @strobley,

Thanks for reaching out.

This was a known issue and was fixed in the 2.1.3 version. Then I tried it on my 2.2.5 and I don’t see any duplicates. Please try a clean re-installation of your theme. Maybe it still has old files that not overwritten by the update.

Thanks!

strobley · August 16, 2018, 8:40pm

Hi Rad,

This is on a clean install of Wordpress, WooCommerce and Pro/X.

Given the fact there is a class which sets display: none to the native Apply Coupon button

.woocommerce .cart .actions .coupon label, 
.woocommerce .cart .actions .coupon input[type="submit"], 
.woocommerce .cart .actions .coupon button[type="submit"] {
    display: none;
}

Also the fact the demos work in the same way - http://demo.theme.co/shop-integrity/cart/

I do not think this is fixed?

friech · August 17, 2018, 1:45am

Hi There,

That button is native to WooCommerce so we can not really remove that.

To resolve this, please navigate to \plugins\woocommerce\templates\cart directory and copy the cart.php file to your child theme under pro-child\woocommerce\cart\ directory (create the folders if it does not exists)

Then open/edit that copied file and find:

<button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?></button>

That is the native button, you can either completely remove that or comment it out.

Thanks,

strobley · August 20, 2018, 11:02pm

I don’t think the button is native to WooCommerce - using your suggestion I would be commenting out the native button which is incorrect.

I’ve checked the WooCommerce source files, here for reference:

github.com

woocommerce/woocommerce/blob/439fec579c822613af08fa14c6e3347b15594570/templates/cart/cart.php

<?php
/**
 * Cart Page
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/cart/cart.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_cart' ); ?>

This file has been truncated. show original

If you see from lines 134-139 only the correct native Apply Coupon button is generated at line 136. There is no other Apply Coupon button in the native code.

The additional button I see only appears on Pro theme, the correct native WooCommerce Apply Coupon button is set to display: none; with Pro generated css code in integrity-light.css?ver=2.2.5

.woocommerce .cart .actions .coupon label, 
.woocommerce .cart .actions .coupon input[type="submit"], 
.woocommerce .cart .actions .coupon button[type="submit"] {
    display: none;
}

As said earlier, in both Wordpress Automattic Storefront theme: https://github.com/woocommerce/storefront and the default TwentySeventeen themes - both do not set display:none; on the native WooCommerce Apply Coupon and both correctly display the native WooCommerce Apply Coupon (line 134-136 cart.php)

I cannot see any WooCommerce cart overrides in Pro 2.2.5 source files either, however it is the case the native WooCommerce Apply Coupon is commented out in by Pro generated css code and the additional button is generated directly after line 143 (update_cart) in cart.php with the Pro theme on a clean install.

paul.r · August 21, 2018, 2:43am

Hi,

The button was added intentionally for design purposes.

The pro generated css was to hide the woocommerce native button and another code to add the button in wp-content\themes\pro\framework\functions\plugins\woocommerce.php ~line 284

If you want to use woocommerce native button, you can add the code below in your child theme’s functinos.php

remove_action( 'woocommerce_cart_actions', 'x_woocommerce_cart_actions' );

and add this in Theme Options > CSS

.woocommerce .cart .actions .coupon label, 
.woocommerce .cart .actions .coupon input[type="submit"], 
.woocommerce .cart .actions .coupon button[type="submit"] {
    display: block  !important;
}

Thanks

strobley · August 21, 2018, 9:03pm

Many thanks Paul, got there in the end

Is there a reason why both Rad and Friech were completely unable to answer and continued to miss inform me even though the information I provided was clearly detailed - even referencing the Themeco demos?

Prasant · August 21, 2018, 10:48pm

You are most welcome. I am glad that solution provided by my colleague @paul.r worked well.

strobley · August 23, 2018, 8:52pm

Thanks nicely avoided my question - if the the case some of the support are still not familiar or not adequately able to support then be honest.

friech · August 23, 2018, 9:53pm

Hi,

Rad was not able to replicate the issue and I was confused I thought you want to remove the button that is already hidden.

Thank you,

system · September 2, 2018, 10:00pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.