• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

29 August - 2018 By Paal Joachim 3 Comments
Last updated on: September 24, 2019

The following are some of the shortcodes that I have used in WooCommerce.

The single product page

From the single product page I move the product short description above the price.
Then I move the product title above the featured product image.
Remove category (or all meta).
I then turn off image zoom effects and make the image non clickable.

Example:

Original-WooCommerce-Single-Product-page

 

Adding the following shortcodes to the functions.php file:

/* --------- WooCommerce - Single Product page -----------*/

// Removes price from above short description and then adds the price back in below short description.
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 20);

// Remove product title from above short description and then adds the product title above image.
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
add_action('woocommerce_before_single_product', 'woocommerce_template_single_title', 10);

// Remove category
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

or use the CSS to hide the category (add it to the style.css file)
.single-product div.product .product_meta {
display: none;
}

// Or hide all meta information (skue, category and tags)
 add_action( 'after_setup_theme', 'my_after_setup_theme' );
 function my_after_setup_theme() {
     remove_action( 'woocommerce_single_product_summary', 
'woocommerce_template_single_meta', 40 );
 }

// disable the magnification zoom in product images
add_action( 'template_redirect', function() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-lightbox' );
    remove_theme_support( 'wc-product-gallery-slider' );
}, 100 );
Add the following code to the style.css file:
/* To make the product image non clickable. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    pointer-events: none;
}

NB! If you have added a description below the image. The tab will likely say “Description” and the title h2 heading will say “Product Description.”
To remove the h2 heading use php code or CSS.

Php code:

// Remove h2 "Product Description" heading.
add_filter('woocommerce_product_description_heading', false);

CSS:

// Remove h2 "Product Description"
heading.
.panel.entry-content h2 {
   display:none; 
}

 

Result:

Adjusted-WooCommerce-Single-Product-page

 

Removing the stock label and number.

To remove the “In Stock”number one can go into the backend. WooCommerce -> Settings -> Products -> Stock and adjust what is seen, but one can not remove the stock label. For this we need to add CSS code.

In the style.css add the following code:

.woocommerce div.product .stock {
display: none;
}

The “In stock” label will now not be displayed on the products page.

 

Resources used:
https://stackoverflow.com/questions/38404187/remove-tags-from-product-page-in-woocommerce
https://github.com/woocommerce/woocommerce/issues/18131
https://eliteeternity.com/remove-product-description-headingtitle-woocommerce/
(See comments.)

 

The Shop page

Removing “Showing all 2 results” and the “Sort by popularity” dropdown.

 

Example:

Original-WooCommerce-Shop-page

 

// SHOP page
// Remove sorting result "Showing all -- results".
remove_action('woocommerce_before_shop_loop', 'woocommerce_result_count', 20);

// Remove sorting drop down.
remove_action('woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30);

 

Result:

Adjusted-WooCommerce-Shop-page

 

More advanced code for the shop page.

Here is code to adjust the button text based on the category of the product.

Result:

Adjusted-WooCommerce-Shop-page-button-text

// Change the text on the shop purchase product button.
add_filter( 'woocommerce_product_add_to_cart_text', 'bbloomer_archive_custom_cart_button_text' );
   
 function bbloomer_archive_custom_cart_button_text() {
 global $product;
  
 $terms = get_the_terms( $product->ID, 'product_cat' );
  foreach ($terms as $term) {
             $product_cat = $term->name;
             break;
 }
  
 switch($product_cat)
 {
     case 'Kitchen';
         return 'Purchase appliance'; break;
     case 'Nature';
         return 'Purchase a breath of fresh air'; break;
     case 'House';
         return 'Purchase something for the house'; break;    
 // case 'category3'; etc...
 // return 'Category 3 button text'; break;
  
     default;
         return 'Default button text when no match found'; break;
 }
 }

Resources:
https://stackoverflow.com/questions/25880460/woocommerce-how-to-edit-the-added-to-cart-message and
https://businessbloomer.com/woocommerce-edit-add-to-cart-text-by-product-category/

 

Cart

Original-WooCommerce-cart-page

To remove the red X (trash) and replace it with a dashicon.

// Add a trash icon.
function kia_cart_item_remove_link( $link, $cart_item_key ) {
return str_replace( '&times;', '<span class="cart-remove-icon"><i class="fa fa-trash" aria-hidden="true"></i></span>', $link );
}
add_filter( 'woocommerce_cart_item_remove_link', 'kia_cart_item_remove_link', 10, 2 );

 

The CSS:

/* Change the delete icon in the cart. Cart page. */
.woocommerce a.remove,
.woocommerce a.remove:before {
font-family: 'dashicons'; 
content: "\f182";
font-size: 20px;
color: #000; 
}
.woocommerce a.remove:hover {
text-shadow: 1px 1px 1px #000;
color: blue !important;
background-color: white !important; /* Removes the default read background. */
}

 

Result:

Adjusted-WooCommerce-cart-page

 

Resources:
https://businessbloomer.com/woocommerce-change-remove-item-icon-cart/#more-21107
https://woocommercecommunity.slack.com/archives/C1KAZ91E3/p1512580846000103?thread_ts=1512528458.000178&cid=C1KAZ91E3 

The Checkout page

 

Original-WooCommerce-Checkout-page

 

Use the following code to adjust the fields seen and to remove the Order notes field.
Then add code to add a new heading.

/* -------- WooCommerce - checkout fields ---------- */ 

/* From Helga the Viking - Kathy. Comment out // the fields you want to keep. */
function kia_modify_default_address_fields( $fields ){
if( isset( $fields['company'] ) ) unset( $fields['company'] );
if( isset( $fields['country'] ) ) unset( $fields['country'] );
//if( isset( $fields['address_1'] ) ) unset( $fields['address_1'] );
if( isset( $fields['address_2'] ) ) unset( $fields['address_2'] );
//if( isset( $fields['city'] ) ) unset( $fields['city'] );
if( isset( $fields['state'] ) ) unset( $fields['state'] );
if( isset( $fields['postcode'] ) ) unset( $fields['postcode'] );
return $fields; 
}
add_filter( 'woocommerce_default_address_fields', 'kia_modify_default_address_fields' );

function kia_remove_billing_phone_fields( $fields ){
if( isset( $fields['billing_phone'] ) ) unset( $fields['billing_phone'] );
// if( isset( $fields['billing_email'] ) ) $fields['billing_email']['class'] = array( 'form-row-wide' );
return $fields;

}
add_filter( 'woocommerce_billing_fields', 'kia_remove_billing_phone_fields' );

// https://businessbloomer.com/woocommerce-remove-order-notes-checkout-page/
// Removes the The order notes box.
add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );


// Change the text above the billing fields
// https://stackoverflow.com/questions/44419189/woocommerce-3-0-change-billing-details-to-say-shipping-details-on-checkout
function wc_billing_field_strings( $translated_text, $text, $domain ) {
switch ( $translated_text ) {
case 'Billing details' :
$translated_text = __( 'Fill in the below billing information.', 'woocommerce' );
break;
}
return $translated_text;
}
add_filter( 'gettext', 'wc_billing_field_strings', 20, 3 );

 

Result:

 

Adjusted-WooCommerce-Checkout-page

 

My Account page

Original-WooCommerce-My-Account-page

 

To adjust the links seen add this code:

/* --------- My Account page and checkout fields ..... -----*/

// My account fields.
// Adjusting the visible sections.
/* https://docs.woocommerce.com/document/woocommerce-endpoints-2-1/ 
*
* Change the order of the endpoints that appear in My Account Page - WooCommerce 2.6
* The first item in the array is the custom endpoint URL - ie http://mydomain.com/my-account/my-custom-endpoint
* Alongside it are the names of the list item Menu name that corresponds to the URL, change these to suit
*/
function wpb_woo_my_account_order() {
$myorder = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'orders' => __( 'Orders', 'woocommerce' ),
// 'downloads' => __( 'Downloads', 'woocommerce' ),
// 'edit-address' => __( 'Addresses', 'woocommerce' ),
// 'payment-methods' => __( 'Payment Methods', 'woocommerce' ),
'customer-logout' => __( 'Logout', 'woocommerce' ),
);
return $myorder;
}
add_filter ( 'woocommerce_account_menu_items', 'wpb_woo_my_account_order' );

 

Result:

Adjusted-WooCommerce-My-Account-page

To adjust the strength of the password meter:

// Password strength meter
/** https://www.snip2code.com/Snippet/1107676/Reduce-or-remove-WooCommerce-2-5-minimum
*Reduce the strength requirement on the woocommerce password.
* 
* Strength Settings
* 3 = Strong (default)
* 2 = Medium
* 1 = Weak
* 0 = Very Weak / Anything
*/
function reduce_woocommerce_min_strength_requirement( $strength ) {
return 1;
}
add_filter( 'woocommerce_min_password_strength', 'reduce_woocommerce_min_strength_requirement' );

 

 

Share this:

  • Email

Categories: Featured, WooCommerce, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. Lee says

    13 August - 2020

    Very good sharing, thanks.

    Reply
  2. Saeed farhadi says

    26 April - 2019

    Hi, Saeed is from Iran
    The post was very good. Thank You

    Reply
  3. http://beheshtezamin.ir says

    3 October - 2018

    Thanks for submitting this entry

    Reply

Leave a Reply to http://beheshtezamin.ir Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.