But there seem to be no before or after default sorting hooks we can use. There are many for the product page as well as the category page. But one to add something just before sorting does not seem to exist. There is a filter, but there are no actions.
New Action Hook
Now, we could create our own do_action so we can hook to it. But we would then also need to add the hook to our template at the location where the ordering is being done.
function imwz_before_default_sorting () {
do_action ('imwz_before_default_sorting');
}
function prod_cat_before_sorting () {
do_action('wcml_currency_switcher', array('format' => '%name% (%symbol%)'));
}
Child Templates
This you would however need to add to your product category or product page template. This cannot be added with ease in let’s say Oxygen Builder, Elementor on in basic WordPress using a plugin. It would need to be added to a child theme’s WooCommerce category and product templates. This is just a copy of the base template files you can find in the plugin and then use in your child theme.
To add a packaging fee for your WooCommerce products on checkout you have many options. You could work with custom fields, additional pricing calculations, but in this post we will use hard coded actions instead.
This is a fixed price and not based on the price or cart total nor connected to shipping. Just a once off fee. Other options including this one can be found at White Pixel.
Unlike cart items, cart fees are non-persistent, this means third-party plugins which add fees need to be constantly hooked into the cart calculations, adding their fees each time the cart totals are calculated.
To do that WooCommerce provides the woocommerce_cart_calculate_fees hook, which third parties can use to add their fees.
Standard Cart / Checkout Surcharge incl Country Filter
/**
Add a standard $ value surcharge to all transactions in cart / checkout
*/
add_action( 'woocommerce_cart_calculate_fees','wc_add_surcharge' );
function wc_add_surcharge() {
global $woocommerce;
if ( is_admin() && ! defined( 'DOING_AJAX' ) )
return;
$county = array('US');
// change the $fee to set the surcharge to a value to suit
$fee = 1.00;
if ( in_array( WC()->customer->get_shipping_country(), $county ) ) :
$woocommerce->cart->add_fee( 'Surcharge', $fee, true, 'standard' );
endif;
}
Do realize they also filter by country in this snippet. They do not just add a general surcharge fee for all locations.
WooCommerce also shared a percentage charge per transaction:
/**
Add a 1% surcharge to your cart / checkout
change the $percentage to set the surcharge to a value to suit
*/
add_action( 'woocommerce_cart_calculate_fees','woocommerce_custom_surcharge' );
function woocommerce_custom_surcharge() {
global $woocommerce;
if ( is_admin() && ! defined( 'DOING_AJAX' ) )
return;
$percentage = 0.01;
$surcharge = ( $woocommerce->cart->cart_contents_total + $woocommerce->cart->shipping_total ) * $percentage;
$woocommerce->cart->add_fee( 'Surcharge', $surcharge, true, '' );
}
which is related to one of the snippets provided by White Pixel.
Gotchas
You do have to remember that this option does not allow you do adjust the fee in the backend and so it is not a flexible fee. You could work with a custom field as well perhaps, but that will not be added to this post just yet.
What if you would like to show a certain text in a tab when stock is available and another when there is no stock. Well we could add a shortcode with an attribute, one with in stock and another without out of stock. But we would prefer to use one. One loading all text with an if else statement. But that would mean all text would be in the plugin or functions.php.
to add a shortcode we can use
/**
* Register in or out of stock text shortcode
*
* @return null
*/
function imwz_register_in_or_out_stock_text_shortcode() {
add_shortcode( 'inoroutofstocktext', 'imwz_in_or_out_stock_text_check' );
}
add_action( 'init', 'imwz_register_in_or_out_stock_text_shortcode' );
Now, the actual function with text and if else statement would be like:
function imwz_in_or_out_stock_text_check () {
global $product;
ob_start();
$output = '';
if ( ! $product->managing_stock() && ! $product->is_in_stock() ) {
echo "2-4 dagen";
}
elseif ($product->is_in_stock()) {
echo "1-2 dagen";
}
else {
echo "nothing to see here"; // or return
}
$output = ob_get_clean();
// wp_reset_postdata();
return $output;
}
Often you need to charge VAT or Dutch BTW for customers only and not for your vendors or companies shopping at your website. So how do you make sure that users with the role business see no VAT and customers or private persons do see VAT?
User Role Check
To check for specific role and apply a rule to it you can use this code:
## The (repetitive) conditional function based on your "special" user roles
function is_special_user_role(){
if ( ! is_user_logged_in() ) return false;
$user = wp_get_current_user(); // current user
$user_roles = $user->roles; // It's always an array (as a user can have many roles)
// HERE your defined user roles
$defined_user_roles = array( 'company' );
if ( count( array_intersect( $user_roles, $defined_user_roles ) ) > 0 )
return true;
else return false; // ==> Added update here
}
VAT Exemption Check
Now, to check if a user role is tax exempt and then turn off VAT/BTW for that user role we can add this action hook:
## Function that will check for user role and turn off VAT/tax for that role
add_action( 'template_redirect', 'wc_diff_rate_for_user', 1 );
function wc_diff_rate_for_user() {
// check for the user role and set the customer object to have no VAT
if ( is_special_user_role() )
WC()->customer->set_is_vat_exempt( true ); // Updated HERE
}
NB If you just need a display excl. vat and do not really need the user to be tax exempt this is not the setup you are looking for.
VAT Price Suffix
Function that removes the price suffix based on role. So with it you could hide the including tax title for certain user roles:
Function that removes the price suffix (inc. Tax) from variable products based on role
add_filter( 'woocommerce_get_price_suffix', 'wc_get_price_suffix_filter', 10, 2 );
function wc_get_price_suffix_filter( $price_display_suffix, $item ) {
// check for the user role return blank if it matches
if ( is_special_user_role() )
$price_display_suffix = '';
return $price_display_suffix;
}
So what if your products are all inclusive VAT? How do you then display the price for a certain user role excluding VAT? Well, you can add a price suffix at wp-admin/admin.php?page=wc-settings&tab=tax
Prijs Excl BTW {price_excluding_tax}
And then you work out a why to hide the price including VAT with CSS or otherwise. With CSS is is kind of hard as there are no unique classes for the basic price display nor for the discounted price display. For the discounted price this could work:
ins {
visibility: hidden;
}
The same for del for the price itself, but would not remove the divs.
Another option would be code to load it separately in the product single template or with a shortcode. Here is a way to show the price with and without taxes and that at the same time.
One way or another working with WooCommerce you wind up needing custom fields and preferably Advanced Custom Fields or ACF fields. This tutorial will talk about (advanced) custom fields in WooCommerce and the many way these can be used. This might wind up being a long post and lots or resources will be used and referred to so bear with me.
What if you want to add an ACF field with your own code to the theme? Well that is just like adding any other advanced custom field type to any template really. As shown at the beginning you just need to focus on the correct product type and field type and then load the data you entered in the backend properly there.
To add an ACF field to the single product page in WooCommerce after the summary you can use a basic setup like this:
// Add ACF Info to Product display page add_action( 'woocommerce_after_single_product_summary', "ACF_product_content", 10 ); function ACF_product_content(){ echo '<h2> ACF Content </h2>'; if (function_exists('the_field')){ echo '<p>Woohoo, the_field function exists! </p>'; the_field('test_field'); } }
It uses the WooCommerce woocommerce_after_single_product_summary hook to add information after the product description. And there are more hooks in WooCommerce for other locations of course.
NB The actual code to load the field in the backend is not mentioned here. This as that is quite easily done using the ACF GUI.
You can also use advanced custom fields to add custom tabs to WooCommerce. This is actually often needed. Many products tend to require extra information in a custom tab. Liquid Web wrote adding custom tabs with ACF. What they do is create a repeater field using a custom file added to the theme. Here is a forked snippet for the repeater field:
Then they load the custom tab with another function in functions.php. This code adds the extra WooCommerce product tab and then loads the repeater field inside the tab. Here is a forked snippet for this WooCommerce product tab addition.
If you would like to display additional information about your products in checkout / at the order form you can read about at WP Major. Major focusses on getting ACF fields in the order form and they use the WooCommerce Product Table plugin. But it does explain how to create them for WooCommerce products so that helps
Remember, for this tutorial we’re mainly focused on taking that custom field data and getting it into a WooCommerce order form ..
Divi & Advanced Custom Fields
The Elegant Themes Divi theme as an ACF module these days. It does however not work with all the custom field types yet. It just works with single fields, tables and repeater fields.
However, since the end of 2018 Divi Builder has dynamic content:
Not only does Divi support that use of standard dynamic WordPress content, it also supports the use of custom field data. Whether you have created your own custom fields, or registered a new custom field with a plugin like Advanced Custom Fields, that dynamic data can now be used within the Divi Builder and connected to any module content area.
Advanced Custom Fields to WooCommerce Attributes
Sometimes you need to add a custom field to a product attribute.
A third and important way to group products is to use attributes. There are two uses of this data type that are relevant for WooCommerce: WooCommerce widgets and variable products
Jordan Smith came up with some nice code for that. Snippet forked and added below. This code you can add to your child theme or basic theme’s functions.php. It ads an ACF custom rule type, rule values and then ads it to product attributes.
Adding an advanced custom field to a WooCommerce category is similar in ways to adding one to an attribute:
// step 1 add a location rule type
add_filter('acf/location/rule_types', 'acf_wc_product_type_rule_type');
function acf_wc_product_type_rule_type($choices) {
// first add the "Product" Category if it does not exist
// this will be a place to put all custom rules assocaited with woocommerce
// the reason for checking to see if it exists or not first
// is just in case another custom rule is added
if (!isset($choices['Product'])) {
$choices['Product'] = array();
}
// now add the 'Category' rule to it
if (!isset($choices['Product']['product_cat'])) {
// product_cat is the taxonomy name for woocommerce products
$choices['Product']['product_cat_term'] = 'Product Category Term';
}
return $choices;
}
// step 2 skip custom rule operators, not needed
// step 3 add custom rule values
add_filter('acf/location/rule_values/product_cat_term', 'acf_wc_product_type_rule_values');
function acf_wc_product_type_rule_values($choices) {
// basically we need to get an list of all product categories
// and put the into an array for choices
$args = array(
'taxonomy' => 'product_cat',
'hide_empty' => false
);
$terms = get_terms($args);
foreach ($terms as $term) {
$choices[$term->term_id] = $term->name;
}
return $choices;
}
// step 4, rule match
add_filter('acf/location/rule_match/product_cat_term', 'acf_wc_product_type_rule_match', 10, 3);
function acf_wc_product_type_rule_match($match, $rule, $options) {
if (!isset($_GET['tag_ID'])) {
// tag id is not set
return $match;
}
if ($rule['operator'] == '==') {
$match = ($rule['value'] == $_GET['tag_ID']);
} else {
$match = !($rule['value'] == $_GET['tag_ID']);
}
return $match;
}
To display an advanced custom field below the product image can be done with relative ease. We found a snippet at Business Bloomer by Rodolfo Melogi as a nice example:
/*** @snippet Display Advanced Custom Fields @ Single Product - WooCommerce* @how-to Get CustomizeWoo.com FREE* @sourcecode https://businessbloomer.com/?p=22015* @author Rodolfo Melogli* @compatible WooCommerce 3.5.7* @donate $9 https://businessbloomer.com/bloomer-armada/*/add_action( 'woocommerce_product_thumbnails', 'bbloomer_display_acf_field_under_images', 30 );functionbbloomer_display_acf_field_under_images() {echo'<b>Trade Price:</b> '. get_field('trade');// Note: 'trade' is the slug of the ACF}
It uses the woocommerce_product_thumbnails hook to add elements below the product thumbnails.
Product Page & Product Table Plugin
To display an ACF field on a product page you can also use ACF to create the fields and the WooCommerce Product Table Plugin. You can read all about it at Barn2 . You can use this plugin to show a lot of product data on top of standard ones.
Product image, name, price
Short or long description
Categories and tags
Attributes and variations
Star rating from reviews
Embedded audio and video
Product Page Admin Only Note
Sometimes the end user wants to add notes in the backend for his use only. A field that is only shown in the admin area. In the admin area for a specific product. How would you go about this? Well, you do of course not have to print / display fields in the frontend so if you do not load them there you can just create them using the advanced field interface. Another way, if somehow your theme autoloads all ACF fields, is to hide them frontend with CSS.
I would use a text area or a field as ACF field type if the note is very short. That would suffice to add a note in the backend.
You can also add custom ones using your own code. See https://stackoverflow.com/a/49054519/460885 where the awesome LoicTheAztec use the WooCommerce hook woocommerce_register_form to add fields and where he does validation as well.
And to save the form custom fields as well we use the following below as shown in SO thread:
// To save WooCommerce registration form custom fields.
add_action( 'woocommerce_created_customer', 'wc_save_registration_form_fields' );
function wc_save_registration_form_fields( $customer_id ) {
if ( isset($_POST['role']) ) {
if( $_POST['role'] == 'reseller' ){
$user = new WP_User($customer_id);
$user->set_role('reseller');
}
}
}
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
$fields['order']['order_comments']['placeholder'] = 'My new placeholder';
return $fields;
}
Now if you want to add more billing fields and or add them before or after exisitng you can use something like
To adjust or add more fields things are more complicated like for the checkout, but this is also possible. Business Bloomer has a snippet to add first and last name for example:
/**
@snippet Add First & Last Name to My Account Register Form - WooCommerce
@how-to Get CustomizeWoo.com FREE
@sourcecode https://businessbloomer.com/?p=21974
@author Rodolfo Melogli
@credits Claudio SM Web
@compatible WC 3.5.2
@donate $9 https://businessbloomer.com/bloomer-armada/
*/
///////////////////////////////
// 1. ADD FIELDS
add_action( 'woocommerce_register_form_start', 'bbloomer_add_name_woo_account_registration' );
function bbloomer_add_name_woo_account_registration() {
?>
<p class="form-row form-row-first"> <label for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?> <span class="required">*</span></label> <input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST['billing_first_name'] ); ?>" /> </p> <p class="form-row form-row-last"> <label for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?> <span class="required">*</span></label> <input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST['billing_last_name'] ); ?>" /> </p> <div class="clear"></div> <?php
}
///////////////////////////////
// 2. VALIDATE FIELDS
add_filter( 'woocommerce_registration_errors', 'bbloomer_validate_name_fields', 10, 3 );
function bbloomer_validate_name_fields( $errors, $username, $email ) {
if ( isset( $_POST['billing_first_name'] ) && empty( $_POST['billing_first_name'] ) ) {
$errors->add( 'billing_first_name_error', ( 'Error: First name is required!', 'woocommerce' ) );
}
if ( isset( $_POST['billing_last_name'] ) && empty( $_POST['billing_last_name'] ) ) {
$errors->add( 'billing_last_name_error', ( 'Error: Last name is required!.', 'woocommerce' ) );
}
return $errors;
}
///////////////////////////////
// 3. SAVE FIELDS
add_action( 'woocommerce_created_customer', 'bbloomer_save_name_fields' );
function bbloomer_save_name_fields( $customer_id ) {
if ( isset( $_POST['billing_first_name'] ) ) {
update_user_meta( $customer_id, 'billing_first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
update_user_meta( $customer_id, 'first_name', sanitize_text_field($_POST['billing_first_name']) );
}
if ( isset( $_POST['billing_last_name'] ) ) {
update_user_meta( $customer_id, 'billing_last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
update_user_meta( $customer_id, 'last_name', sanitize_text_field($_POST['billing_last_name']) );
}
}
To work with conditionals things get more complicated and of course radio buttons or select boxes are also a bit tougher still. You could use jQuery like this for example showing a field when radio button toggled:
$('.customer-type-radio input[type="radio"]').on('click', function () {
$('.company-field').slideToggle();
});
For code above by Business Bloomer you would need to focus on other html fields of course, but often after making choices like checkboxes or radio buttons you would like to toggle other fields.
So you want to import a couple of thousand WooCommerce products and you want them imported included attached cross-sell. This as you need to have each product shown with cross-sells as thumbnails below each product. So what do you do? What plugin options are out there? Well, WP All Import comes to mind right away, but there is also Product Import Export for WooCommerce by Webtoffee. Let’s discuss them here.
Product Import Export for WooCommerce
Product import export plugin allows you to import or export WooCommerce simple products. If you want to import other product types such as variable products you will need the premium version which costs $69 for a single site license.
Use SKU to link up-sells and cross-sells: Check this option to use SKU to link the up-sells and cross-sells of a product. If this option is not checked, up-sells and cross-sells of a product will be linked using the Product ID.
WP All Import with WooCommerce Addon
Wp All Import is the most famous import export tool in the WordPress arena and it a really nice tool made by the developer that also built Oxygen. WP Import / Export + All ad-ons costs you $249 USD. This will allow exporting as well as importing and using all ad-ons including the WooCommerce ad-on. This allows importing of all kinds of post types, not just WooCommerce products.
For a particular client we wanted to offer very similar products as thumbnail links under products. The linked products would be similar products. They would however have to be separate products offering differences in color, fabric and pricing. They would also have a sample on offer each of them.
Variable Product?
Variable products do offer all the freedom in size, color and other attributes and even allow you to use variable prices. But as we really wanted to have independent products and even sell a sample per product this was not ideal at all. That is why a variable product was not a good choice.
Cross-Sell Linked Products
A cross sell was appealing as it would allow this linking and allow related products to stay intact as option below each product with cross-sell or linked product thumbnails. Here a little summary of the options for product linking in general.
Cross Sells are products that you would like to sell besides other products. They are often complementary items but they don’t have to be. In our case they would be more like related products. Related products are products related by tag or categorie. An option we wanted to keep open. So we did not want to use them as thumbnails below products of choice. Up-sells are products that tend to be pricier you try to get people interested in while looking at another product. Products you recommend so to speak. We will not be using them for now.
Cross-Sell Display
So as you can see cross-sells seemed to be the best choice. Now we wanted them to load on each product page where need be with ease and if a cross-sell would be removed or changed the thumbnail and link would have to be removed or updated. Normally cross-sells are loaded when you are at the cart page. And we wanted them on the single product page.
WooCommerce Cross Sell Products Shortcode
The Plugin WooCommerce Cross Sell Products Display allows the display of cross-sell products using a shortcode on single product pages or pretty much anywhere you would need them shown. It basically uses this code to get the cross-sell ids:
If you need to load the shortcode in an advanced custom field as you want to easily load cross-sell on product pages you can do so as well. You can simply use the following code in your template:
do_shortcode( get_field('FIELDNAME') );
or allow it more broadly for certain field types inside functions.php using
