When the place order button is clicked on my woocommerce site it takes a few seconds to complete the order, the user however cant see that the wheel turning to show the script is running as this is at the top of the page. Is there a way to change the text on the button once clicked to 'Please Wait' or at least change the colour once visited.
I tried changing the colour of the visited state using the following css but it doent work
.woocommerce #respond input#submit, .woocommerce a.button:visited, .woocommerce button.button:visited, .woocommerce input.button:visited {
color: #ffffff;
background-color: #262a2b;
border-radius: 0px;
}
Use this:
add_action( 'wp_footer', 'custom_checkout_jquery_script' );
function custom_checkout_jquery_script() {
if ( is_checkout() && ! is_wc_endpoint_url() ) :
?>
<script type="text/javascript">
jQuery( function($){
jQuery('form.checkout').on('submit', function(event) {
jQuery('button#place_order').text('Please Wait');
event.preventDefault();
});
});
</script>
<?php
endif;
}
Related
I want to add 'continue shopping' / 'add product' link before order review on checkout page. But I want it to be inline with "Your order" text.
See this screenshot: https://ibb.co/47f6vd7
I tried this code:
add_action('woocommerce_checkout_order_review','woocommerce_checkout_before_order_review_add_product');
function woocommerce_checkout_before_order_review_add_product(){
$continue_shopping_url = wc_get_page_permalink( 'shop' );
$add_product_label = 'add product';
if(!empty($continue_shopping_url)){
echo "$add_product_label";
}
}
But it show on the line below "Your order" text. So it looks ugly.
How do i make it inline with "Your order" text using additional css?
First of all you are using the wrong hook.
While woocommerce_checkout_order_review will cause the text to be added insde the #order_review div, the woocommerce_checkout_before_order_review hook will cause it to be placed before the #order_review div.
So you get:
function action_woocommerce_checkout_before_order_review(){
$continue_shopping_url = wc_get_page_permalink( 'shop' );
$add_product_label = 'add product';
if ( ! empty ( $continue_shopping_url ) ) {
echo '<div class="my-label">' . $add_product_label . '</div>';
}
}
add_action( 'woocommerce_checkout_before_order_review', 'action_woocommerce_checkout_before_order_review', 10, 0 );
Which CSS you will have to apply for this is completely theme dependent,
but using display: inline-block; can certainly come in handy
Make sure you have a child theme setup. You can then add the 'Continue shopping' link via the woocommerce_checkout_before_order_review action hook:
add_action( 'woocommerce_checkout_before_order_review', 'woocommerce_checkout_add_continue_shopping_link' );
function woocommerce_checkout_add_continue_shopping_link() {
printf( 'Continue shopping', wc_get_page_permalink( 'shop' ) );
}
Add the above code snippet to the functions.php of your child theme. Then take care of the CSS styling in the style.css of your child theme.
For instance like this:
body.woocommerce-checkout h3#order_review_heading {
float: left;
width: auto;
}
body.woocommerce-checkout a.checkout-continue-shopping {
font-size: 0.8em;
float: left;
padding: 0.5em 1em;
background: #444;
text-decoration: none;
color: white;
margin-left: 2em;
margin-top: 0.25em;
}
Which will give you the following result:
You will probably also have to add some CSS media queries to make this look good on mobile and tablet.
I have the below code for adding a "clear cart"button to my woocommerce cart page. The text on the button is not centered on mobile and would like it to be. The button also is not completely round and looks wrong. Please visit my site https://www.livestainable.co.za add an item to the cart to replicate my issue. I have also added some screenshots of the issue. I would very much appreciate if someone can help me out with this. Thanks guys
here is the screenshot of the issue on mobile.
add_action( 'woocommerce_cart_coupon', 'custom_woocommerce_empty_cart_button' );
function custom_woocommerce_empty_cart_button() {
echo '' . esc_html( 'Empty Cart', 'woocommerce' ) . '';
}
add_action( 'wp_loaded', 'custom_woocommerce_empty_cart_action', 20 );
function custom_woocommerce_empty_cart_action() {
if ( isset( $_GET['empty_cart'] ) && 'yes' === esc_html( $_GET['empty_cart'] ) ) {
WC()->cart->empty_cart();
$referer = wp_get_referer() ? esc_url( remove_query_arg( 'empty_cart' ) ) : wc_get_cart_url();
wp_safe_redirect( $referer );
}
}
You simply have to add some lines of code to your style
/* centering text on mobile */
#media (max-width:767px) {
table.shop_table.cart .coupon .button {
text-align: center;
}
}
/* fixing border radius on dekstop */
#media (min-width:768px) {
table.cart .coupon .button:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
I'm working on a WordPress site and running into a problem. I have a list on a page including download buttons, only I can't seem to work out how to change the colour of the button or the font? The code is as follows:
class="wp-block-file__button" download>Download</a></div>
How would I go about formatting the button here?
Thanks
Depending on where is your button (admin panel or theme):
For admin panel (Add to function.php)
<?php add_action( 'admin_head', 'theme_admin_css' );
function theme_admin_css() {
echo '
<style>
.wp-block-file__button {
background-color: red!important;
color: white!important;
}
</style>'; ?>
OR if in actual theme (Add to your style.css)
.wp-block-file__button {
background-color: red!important;
color: white!important;
}
I'm trying to do a hook to change the style of the buy button when the product is without stock.
I have done something like this, but without success.
do_action( 'woocommerce_no_stock', $product );
function action_woocommerce_no_stock( $product ) { ?>
<style>
.btn-assine {
background: blue;
}
</style>
<?php
};
add_action( 'woocommerce_no_stock', 'action_woocommerce_no_stock');
Usually Woocommerce removes the button if the product is out-of-stock. If your product settings is allowing backorders then you'll see the button and probably the CSS class for this button will be different from the others.
Please Try Below Code.
do_action( 'woocommerce_no_stock', $product );
function action_woocommerce_no_stock( $product ) {
echo '
<style type="text/css">
.single-product .product .single_add_to_cart_button.button{
background-color: #333333;
color: #FFFFFF;
}
.woocommerce .product .add_to_cart_button.button{
background-color: #333333;
color: #FFFFFF;
}
</style>
';
};
add_action( 'woocommerce_no_stock', 'action_woocommerce_no_stock', 10, 1 );
I want to add a second add to cart button at the end of the page on my woocommerce product description.
how do I do this?
Thank you so much for your time!
Method-1
$id = get_the_ID();
echo do_shortcode( '[add_to_cart id='.$id.']' );
Method-2
$product = get_product(get_the_ID());
echo "<a href='".$product->add_to_cart_url()."'>add to cart</a>";
Would you please add above code end of the woocommerce product description?
Method-3
Add below code in your active theme functions.php.
add_action( 'woocommerce_single_product_summary', 'custom_button_after_product_summary', 30 );
function custom_button_after_product_summary() {
global $product;
echo "<a href='".$product->add_to_cart_url()."'>add to cart</a>";
}
1. Solution: Add code in your theme's function.php file.
add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );
function my_extra_button_on_product_page() {
global $product;
echo 'Add to cart';
}
2. Solution: Install Custom WooCommerce Add to Cart plugin
Custom WooCommerce Add to Cart Plugin
3. Solution: You can use hooks with shortcodes:
Custom add to cart button
Or create overrides for WooCommerce files in your own template.
Solution: Add code in your active theme functions.php.
// Add "Add To Cart" button //
add_action('woocommerce_after_shop_loop_item', 'add_a_custom_button2', 13 );
function add_a_custom_button2() {
global $product;
// Not for variable and grouped products that doesn't have an "add to cart" button
if( $product->is_type('variable') || $product->is_type('grouped') ) return;
// Output the custom button linked to the product
echo '<div style="margin-bottom:10px;">
<a class="customviewaddtocartbutton" href="' . esc_attr( $product->add_to_cart_url() ) . '">' . __('Add To Cart') . '</a>
</div>';
}
Styling: Add Code in your child-theme.css or theme.css
/* Custom Add To Cart Button */
.customviewaddtocartbutton {
display: block !important;
width: 100% !important;
border: none !important;
background-color: #E6723F !important;
color: white !important;
padding: 2px 2px !important;
font-size: 16px !important;
cursor: pointer !important;
text-align: center !important;
border-radius: 30px !important;
}
.customviewaddtocartbutton:hover {
background-color: #246e4c !important;
color: white !important;
cursor: pointer !important;
}