[Resolved] When the code below is entered, why doesn’t it make the required change?

[John]

Using WP admin Dashboard>Appearance>Customise>Simple CSS, any suggestions as to why when the code below is entered, it doesn’t make the required change?
/* change WooCommerce Checkout button text and add secure padlock icon */+
function woocommerce_button_proceed_to_checkout() { ?>
” class=”checkout-button button alt wc-forward”>
<img width="16" src="https://mystagingsite.florapotts.com/wp-content/uploads/2020/05/SVGlockIconWhite.svg” alt=”GO TO SECURE CHECKOUT” />
<?php esc_html_e( ‘GO TO SECURE CHECKOUT’, ‘woocommerce’ ); ?>

<?php
}
A clear simply stated solution (please remember to be kind, as I’m obviously not smart enough) would be very much appreciated 😊

[Ying]

Hi John,

The code is not CSS, you could use the method mentioned in below article to insert the php code:
Adding PHP: https://docs.generatepress.com/article/adding-php/

[John]

Thanks for the rapid response Ying. Unfortunately (even after substituting straight quotes and apostrophies where there were curly ones) and copy/pasting the code provided into a new Code Snippet, it returned the following result: “The snippet has been deactivated due to an error on line 3:

Cannot redeclare function woocommerce_button_proceed_to_checkout.”

Any further suggestion for achieving the desired solution please?

[David]

Hi there,

You can change the text of the Order button using this PHP Snippet instead:

add_filter( 'woocommerce_order_button_text', 'db_woo_custom_order_button_text' );
function db_woo_custom_order_button_text() {
 return __( 'GO TO SECURE CHECKOUT', 'woocommerce' );
}

What you cannot easily do without completely rewriting the Button HTML ( which is not a good idea ) is include an <img> within the Button Label.

You could use a HTML icon – by changing the GO TO SECURE CHECKOUT to 🔒 GO TO SECURE CHECKOUT in the code above.

Otherwise to add your Image it would have to be a background image for the button. Which you can adding this CSS to your site ( How to add CSS ):

#place_order {
  background-image: url(https://mystagingsite.florapotts.com/wp-content/uploads/2020/05/SVGlockIconWhite.svg);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 20px 45%;
}

Its not a perfect solution as you will need to adjust the background-size and background-position to suit. The above sets the image to 20px in size, positions it 20px from the left hand side, and roughly (45%) in vertical center.

[John]

Hi David …
Before attempting to add the HTML padlock icon, I started off with using your newly suggested PHP snippet which I copied and pasted into a new Code Snippet:
add_filter( ‘woocommerce_order_button_text’, ‘db_woo_custom_order_button_text’ );
function db_woo_custom_order_button_text() {
return __( ‘GO TO SECURE CHECKOUT’, ‘woocommerce’ );
}
…Code Snippets accepts, saves and implements the code provided but despite my having cleared server and browser caches, the desired change to the text on my (content filled) shopping cart’s checkout button, does not materialise.

Where to go next with this please?

[David]

Try going to Woocommerce > Status > Tools and clearing the: WooCommerce transients and Expired Transients. Then visit the site in a private/incognito browser.

If its still doesn’t work then there maybe another plugin or function that is changing the forms behaviours. If needed send us a link to the site and i can take a look.

[John]

Tried your helpful suggestions David and your suspicion in the last paragraph nailed the problem! Having implemented a solution, I can at last respond and share it with you. It transpired that several WooCommerce functions and that of 3 other plugins was being messed up by a JS conflict caused when using the JS Minify and Combine of SiteGround’s SG Optimiser Frontend optimization options. Once de-activated everything started working again, so getting back on track now thanks.

[David]

Glad to hear you found the issue!

[Author]

Posts