Enfold version 6 now offers ACF (Advanced Custom Fields) Support and we can use this to customize our woocommerce product pages. Here is an example of using custom fields and adding them to our product pages, while in this example I have named the fields by their location on the single product page, you can use this as a reference for your product pages and easily change the names to suit your project. Here is a export file of my example so you can import it into your ACF plugin under ACF ▸ Tools ▸ Import and follow along.
First we will add a new Field Group named products
with these eight fields:
Then below these in the settings we will ensure that these will show in the backend of product post types by setting the Location Rules to Product
In the backend of the product page you will see we added six simple text fields for short text and two text areas for longer text. Any of these fields could be changed to other types such as images, numbers, URLs, etc.
Now to show each of these custom fields on the frontend in a specific location we will need to add a function, I recommend using the WP Code plugin then add a new snippet, and when you create a snippet look in the top right corner use the PHP snippet as the code type:
then add this code and save:
add_action( 'woocommerce_single_product_summary', 'add_before_title_field', 3 );
function add_before_title_field() { ?>
<?php if(get_field('before_title')) { ?>
<div class="before-title"><?php the_field('before_title'); ?></div>
<?php }
}
add_action( 'woocommerce_single_product_summary', 'add_after_title_field', 5 );
function add_after_title_field() { ?>
<?php if(get_field('after_title')) { ?>
<div class="after-title"><?php the_field('after_title'); ?></div>
<?php }
}
add_action( 'woocommerce_single_product_summary', 'add_after_price_field', 10 );
function add_after_price_field() { ?>
<?php if(get_field('after_price')) { ?>
<div class="after-price"><?php the_field('after_price'); ?></div>
<?php }
}
add_action( 'woocommerce_single_product_summary', 'add_after_excerpt_field', 20 );
function add_after_excerpt_field() { ?>
<?php if(get_field('after_excerpt')) { ?>
<div class="after-excerpt"><?php the_field('after_excerpt'); ?></div>
<?php }
}
add_action( 'woocommerce_single_product_summary', 'add_after_button_field', 30 );
function add_after_button_field() { ?>
<?php if(get_field('after_button')) { ?>
<div class="after-button"><?php the_field('after_button'); ?></div>
<?php }
}
add_action( 'woocommerce_single_product_summary', 'add_after_meta_field', 40 );
function add_after_meta_field() { ?>
<?php if(get_field('after_meta')) { ?>
<div class="after-meta"><?php the_field('after_meta'); ?></div>
<?php }
}
add_action( 'woocommerce_product_thumbnails', 'add_under_product_image_field', 30 );
function add_under_product_image_field() { ?>
<?php if(get_field('under_product_image')) { ?>
<div class="under-product-image"><?php the_field('under_product_image'); ?></div>
<?php }
}
add_action( 'woocommerce_product_after_tabs', 'add_product_after_tabs_field', 3 );
function add_product_after_tabs_field() { ?>
<?php if(get_field('product_after_tabs')) { ?>
<div class="product-after-tabs"><?php the_field('product_after_tabs'); ?></div>
<?php }
}
Here is where each field will show on the frontend, I have added a red border around each field for reference, this will not show on your site, but each field does have a unique class so you can easily style with css to suit your needs, such as background colors or larger bold text:
If you have thumbnails under your product image and you are trying to style the field under the images you may find the thumbnails covering the field some if you are using a border or background color like this:
To solve this add this css to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
.woocommerce-product-gallery--with-images .thumbnails ~ .under-product-image {
margin-top: 160px;
}
If you found this post helpful leave a comment and let me know how you are using this for your project.