Some questions you may have when using WooCommerce to build your shop!

Notes

• CSS: You can insert to Appearance > Customize > Custom CSS (or Additional CSS) or Appearance > Editor > Style.css
• Filter, Action: You can insert to Appearance > Editor > funcions.php or insert via Code Snippets Plugin.

1. Change Quantity Arrow to Plus & Minus

If you want to change arrow icon to plus & minus

just insert this code to functions.php or using Code Snippets plugin.

// From Businessbloomer.com
// 1. Show Buttons
 
add_action( 'woocommerce_before_add_to_cart_quantity', 'bbloomer_display_quantity_plus' );
 
function bbloomer_display_quantity_plus() {
    echo '<button type="button" class="plus" >+</button>';
}
 
add_action( 'woocommerce_after_add_to_cart_quantity', 'bbloomer_display_quantity_minus' );
 
function bbloomer_display_quantity_minus() {
    echo '<button type="button" class="minus" >-</button>';
}
 
// -------------
// 2. Trigger jQuery script
 
add_action( 'wp_footer', 'bbloomer_add_cart_quantity_plus_minus' );
 
function bbloomer_add_cart_quantity_plus_minus() {
    // Only run this on the single product page
    if ( ! is_product() ) return;
    ?>
        <script type="text/javascript">
             
        jQuery(document).ready(function($){ 
             
            $('form.cart').on( 'click', 'button.plus, button.minus', function() {
 
                // Get current quantity values
                var qty = $( this ).closest( 'form.cart' ).find( '.qty' );
                var val = parseFloat(qty.val());
                var max = parseFloat(qty.attr( 'max' ));
                var min = parseFloat(qty.attr( 'min' ));
                var step = parseFloat(qty.attr( 'step' ));
 
                // Change the value if plus or minus
                if ( $( this ).is( '.plus' ) ) {
                    if ( max && ( max <= val ) ) {
                        qty.val( max );
                    } else {
                        qty.val( val + step );
                    }
                } else {
                    if ( min && ( min >= val ) ) {
                        qty.val( min );
                    } else if ( val > 1 ) {
                        qty.val( val - step );
                    }
                }
                 
            });
             
        });
             
        </script>
    <?php
}

Save changes and view site!

2. How to Remove Full Description?

Use this action code

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );

3. How to change “Add to Cart” text?

Use this filter

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_single_add_to_cart_text' );  // 2.1 +
  
function woo_custom_single_add_to_cart_text() {
  
    return __( 'Tuan Phan', 'woocommerce' );
  
}

4. Hide Add to Cart button

Use CSS

form.cart {
display: none;
}

5. How to Customize Add to Cart Button Style?

Use CSS

/* change background, color, font.... to what you want */
/* You can use Color Name or Color Code. Check color-hex.com to see over 500 Color Code */
.woocommerce button.button.alt {
    background: red;
    color: white;
    font-size: 20px;
    font-weight: 300;
    font-family: "Helvetica", sans-serif;
    border-radius: 10px;
    border: 5px solid green;
}
/* Add to Cart when hovering */
.woocommerce button.button.alt:hover {
    background: violet;
    color: black;
    border-color: yellow;
}

6. How to customize Quantity Box?

Use CSS

/* This is CSS for QUANTITY BOX */
.woocommerce .quantity .qty {
    border-radius: 10px;
    height: 50px;
    width: 100px;
    background: #f1f1f1;
    color: green;
    font-size: 30px;
}

7. How to Remove Pricing on Single Product page?

Use this action code

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

8. How to Remove Star Rating?

Use this Action code

remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );

9. How to remove Add to Cart button on Single Product Page

Use this action code

remove_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );

10. Remove Description Heading on Description Tab

Use this filter

add_filter( 'woocommerce_product_description_heading', '__return_null' );

11. Show Number of Products Sold on WooCommerce Product Page

Use this action code

add_action( 'woocommerce_single_product_summary', 'bbloomer_product_sold_count', 11 );
 
function bbloomer_product_sold_count() {
global $product;
$units_sold = get_post_meta( $product->get_id(), 'total_sales', true );
if ( $units_sold ) echo '<p>' . sprintf( __( 'Products Sold: %s', 'woocommerce' ), $units_sold ) . '</p>';
}

12. How to rename Description Tab

Use this filter

add_filter( 'woocommerce_product_description_tab_title', 'bbloomer_rename_description_product_tab_label' );
 
function bbloomer_rename_description_product_tab_label() {
    return 'New Name';
}

Featured Image: 3dman_eu/Pixabay