Custom Enfold Layout Builder Elements
Download for FREE!
We love the Enfold WordPress theme due to its ease of use and versatility. You can build a lot of different kinds of websites with just that one theme alone. One of the key features is its integration with WooCommerce. Their stock product page layout is great for most uses, but what if you wanted to have more control over the look of each product page? The devs have provided a few of the key elements as part of the custom layout builder, but there are still a lot of elements missing that you’d really want. So I took the time to create some custom elements for use in the Advanced Layout Builder that should cover all of the missing elements….and a few custom crafted ones are thrown in to help you build a better product page. If you encounter any errors, please don’t hesitate to give us a heads up.
If you would like a custom layout builder widget made for your custom shortcodes or plugins that you use with your Enfold built website, feel free to request a quote. All quotes will be based on the complexity if the widget and the time needed to craft it.
[wc_product_modern link=’3385′ new_title=” tagline=’SALE’ newbadge=” sale=’light’ sale_bg=’#d54e21′ newprod=” newprod_font=” newprod_bg=’#588737′ extratag=’Unlimited Updates’ extra_bg=’#0074aa’ img_size=’product’ heading_size=’30’ prefix=’Only’ suffix=” overlay=’0.75′ overlay_start=’0′ overlay_end=’60’ av_uid=’av-1burqux’]
Step 1
Before you can begin adding in new shortcodes to the layout builder you must add the following code to your child theme’s functions.php file.
// Enable Custom Layout Builder Addins
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
$template_url = get_stylesheet_directory();
array_unshift($paths, $template_url.'/shortcodes/');
return $paths;
}Step 2
Purchase and download the addon files, unzip, upload to your child theme folder, and begin highly customizable product pages with Enfold. Checkout what’s included below. Don’t see a layout builder element that you’re looking for? Contact us for a free quote for a custom built add-in based on your favorite shortcode or php snippet.
What’s Included?
Before you can begin adding in new shortcodes to the layout builder you must add the following code to your child theme’s functions.php file.
Product Heading
Using the built-in Special Heading option as a starting point, we’ve created an element which will display the product title in a header. Optionally display the product’s short description as well. Additionally, we’ve added the ability to set the color for the header and short description.
Price Heading
Using the built-in Special Heading option as a starting point, we’ve created an element which will display the product price, or sale price, in a header. We’ve even accounted for variable products and the mobile layout. Optionally display the product’s short description as well. Additionally, we’ve added the ability to set the color for the header, price suffix, short description, and border.
Product Image & Modern Product Image
Product Image – This element will display whatever image you select as the product image…which is really just the featured image on any other page. We’ve thrown in the option of having it link to a larger version displayed within a lightbox popup, or just display the image without a link. Additionally, if the product is on sale it will feature a sale badge with an option to disable.
Modern Product Image – This element is a minimal version.
Single Product Listing
Enfold has a layout element that allows you to display a grid of products, but there are times where you just want to display one. WooCommerce comes with a simple shortcode to do this, so we made it into a layout element. Simply pick a product and set the options.
The modern version employs minimal design with a classy hover effect. It also includes optional sale and extra tagline elements. This element will include three new image size options as this style lends itself to images more taller than wide. Simply add the following snippet to your functions.php file.
// Add new custom image sizes
add_action( 'after_setup_theme', 'wpdocs_theme_setup' );
function wpdocs_theme_setup() {
add_image_size( 'magazine_alt', 750, 1000, true );
add_image_size( 'product', 650, 800, true );
add_image_size( 'product_alt', 700, 858, array( 'right', 'center' ) );
}
add_filter( 'image_size_alt', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'magazine_alt' => __( 'Modern Magazine' ),
'product' => __( 'Modern Product' ),
'product_alt' => __( 'Modern Product Alt' ),
) );
}[av_wc_single link=’3385′ av_uid=’av-3e6fkp’]
[wc_product_modern link=’3385′ new_title=” tagline=’SALE’ newbadge=” sale=’light’ sale_bg=’#d54e21′ newprod=’enabled’ newprod_font=’#ffffff’ newprod_bg=’#588737′ extratag=’unlimited updates’ extra_bg=’#0074aa’ img_size=’product’ heading_size=’30’ prefix=’Only’ suffix=” overlay=’0.6′ overlay_start=’10’ overlay_end=’50’ av_uid=’av-w09rkp’]
Product Price
Simply displays the current price of the product so you can place the element anywhere you want.
Product Feature List
Highlight key features of your product up front. This layout element comes with the option of changing the icon color.
Gift Wrap
Allows your customers the ability to add gift wrapping to their order by simply linking the element via product ID to the gift wrap product you created. This allows you to setup multiple gift wrap products of varying prices to account for different products. The header color, text, and button elements are all editable.
Product Tag List
Display a list of product tags anywhere you want. Includes options to change the title, font color, and style.
Shop Alerts
If you’re using a custom layout for your product pages, the WooCommerce alert messages don’t show up for some reason. So we created a simple widget that will allow you to display them anywhere you want.
Product SKU
Display the current product’s SKU.
Add To Cart Button
Just a simple button that will allow you to add any simple product directly to the cart. All parts of the button are customizable like a standard button and all you have to do is enter the ID number of the product it should link to.
Order Tracking Form
Display the order tracking form anywhere you want.
Product Category Promo
Simply set the category ID number. The heading, category image, and category description will then automatically populate. All you have to do then is set the button link. The button link doesn’t automatically to the category page to account for the reality that everyone sets up their store differently. So you get to choose where it will link to. Note, for the elements to automatically populate, you will have had to fill them in. These elements are found in the Product section of your admin panel. As an added feature, we’ve accounted for the mobile layout. If the element is viewed on a cell phone, then the round image will be hidden and a wide version of the graphic will be displayed below the heading and the content element will lose the left padding to become full width.
Sale Product Grid
Display a grid of products which are on sale with settings to set the grid columns.
Short Description
If you choose to create a custom layout for a product page, the short description field is still there. The problem is that the stock layout elements in the builder don’t account for it so if you fill it in with text, the text doesn’t display anywhere. So we created a layout element that will allow you to use it anywhere in your new layout. You can adjust the font size and color.
Ribbon Heading
Displays a flat style ribbon with the heading text of your choice. Both the font and ribbon colors are fully customizable.
[ribbon_heading heading=’Spiderfly Studios | Your pixel perfect professionals’ size=’16’ custom_font=’#ffffff’ custom_bg=’#74a6d9′ custom_class=” admin_preview_bg=” av_uid=’av-k9l2nd’]
Color Picker
This element will allow you to display a color picker that will output the hex code of the color chosen. Great for products where you allow your customers to pick any color they want. See the live example below.
☚ Choose a color...
ACF Field Values
Displays the value of a specific field created with Advanced Custom Fields. Simply input the field name. For instance, if you have a field called Item Details, then you would input item_details into the field. Optionally you can include a page or post ID number to call the field value from a specific page or post. Per ACF documentation regarding the get_field() function, this should work with most types of custom fields.
For more information on this, please visit the ACF get_field() documentation.
ACF Repeater Values
This element allows you to display the values of an Advanced Custom Fields repeater. Note, this will only work a simple repeater to recall the values of a single subfield. All you have to do is enter the repeater name and subfield name.
Example: if the name for your repeater or subfield is something like Item Name, then the value you enter in the field will be item_name.
For further details on how this works, please see the ACF repeater documentation.
Copyright Year
Always displays the current year for a copyright notice that is always updated. Includes the option to add a start year and additional text.
[av_copyright prefix=’Copyright’ startyr=’2005′ suffix=’All Rights Reserved’ color=” custom_font=” custom_class=” admin_preview_bg=” av_uid=’av-15fu89′]
Edit Button
Displays an edit button if you’re an admin. Takes you to the edit page for the post, page, product, or any other post type.
Page/Product Shortlink
Displays the shortlink text for the current page or product.
[av_shortlink color=” custom_font=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av_uid=’av-47cvxl’]