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:
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:
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:
// SHOP page
// Remove sorting result "Showing all -- results".
remove_action('woocommerce_before_shop_loop', 'woocommerce_result_count', 20);
remove_action('woocommerce_after_shop_loop', 'woocommerce_result_count', 20);
// Remove sorting drop down.
remove_action('woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30);
// remove_action('woocommerce_after_shop_loop', 'woocommerce_catalog_ordering', 30);
Result:
More advanced code for the shop page.
Here is code to adjust the button text based on the category of the product.
Result:
// 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
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( '×', '<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:
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
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:
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:
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' );
Leave a Comment