Flatsome Theme and Flatsome UX Builder

Overview

Flatsome is a very popular WordPress theme with a long history. It's lightweight, fast and packed with all the features you need to run your WooCommerce shop. It also includes UX Builder, which gives you the ability to create pages with a powerful frontend editor that includes many types of layouts and content blocks.

Advanced Woo Labels (AWL) has built-in support for the Flatsome theme and its UX Builder. So in most cases you won't have to take any extra steps to display product labels. There are only a few exceptions for some UX Builder label positions and blocks, which we will cover in the relevant sections of this article.

WooCommerce pages support

Speaking about default WooCommerce pages: shop, archives, search results, single product page - on all these pages AWL plugin labels should be visible without any problems.

Here you don't need to take any extra steps - the product labels for all these pages should be visible by default (of course, if the conditions for displaying labels are met).

Flatsome theme shop page with products labels

Flatsome theme single product page with labels

Needless to say, you can choose which pages to show your labels on by using special labels display rules.

You can also disable all tags for a single product page at once - just open the plugin settings page and turn off the Show for single product option.

Flatsome UX Builder support

The Flatsome theme also includes a built-in front-end page editor - UX Builder. This editor has many useful blocks - including WooCommerce blocks for displaying products in various ways.

WooCommerce blocks inside Flatsome UX Builder

You can use any of these blocks to style pages and display shop content - the AWL labels plugin will work with all of them.

The product labels will be visible even in UX Builder - when you edit the page layout - and will look the same on the final page when you publish the changes.

WooCommerce block with product labels inside UX Builder edit screen

Same page with products on front-end

AWL product labels will work fine with almost all of these UX Builder blocks - except for a few. And even then you can use some solutions to fix the problem. We'll talk about such ways below, in the next chapter.

Some labels display fixes

'Products List' block for UX Builder

The Product list block is the only front-end editor block that doesn't display plugin labels. The only way to solve this problem is to make some changes to the Flatsome file (better if you use a child theme) and also add some extra code to the theme's functions.php file (or use any code snippets plugin for this).

Here are the steps to fix the problem:

1. Open wp-content/themes/flatsome/woocommerce/content-product-small.php file and replace all its content with the following one:

<?php global $product; ?>
<li>
	<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>" title="<?php echo esc_attr( $product->get_title() ); ?>">
		<?php
        echo do_action('awl_on_image');
        echo $product->get_image( 'woocommerce_gallery_thumbnail' );
        ?>
		<span class="product-title">
            <?php
            echo do_action('awl_before_title');
            echo $product->get_title();
            ?>
        </span>
	</a>
	<?php if ( ! empty( $show_rating ) ) echo $product->get_rating_html(); ?>
	<?php echo $product->get_price_html(); ?>
</li>

2. Open Flatsome functions.php file and add following code:

add_filter( 'awl_labels_hooks', 'm_awl_labels_hooks' );
function m_awl_labels_hooks( $hooks ) {
    $hooks['before_title']['single']['awl_before_title'] = array( 'priority' => 10 );
    $hooks['before_title']['archive']['awl_before_title'] = array( 'priority' => 10 );
    $hooks['on_image']['single']['awl_on_image'] = array( 'priority' => 10 );
    $hooks['on_image']['archive']['awl_on_image'] = array( 'priority' => 10 );
    return $hooks;
}

3. That's it! Now simply place the Product List block on any page and you'll see that it also includes all the necessary product labels.

Products List block with products labels

'Before title' label position for single product page

Another problem you may encounter is that the labels are not visible on the single product page when the label position type is set to Before Title.

To solve this problem, follow the steps below:

1. Open wp-content/themes/flatsome/woocommerce/single-product/title.php file and replace all its content with the following one:

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

?>
<h1 class="product-title product_title entry-title">
    <?php echo do_action('awl_before_title'); ?>
	<?php the_title(); ?>
</h1>

<?php if ( get_theme_mod( 'product_title_divider', 1 ) ) { ?>
	<div class="is-divider small"></div>
<?php } ?>

2. Open Flatsome functions.php file and add folowing code:

add_filter( 'awl_labels_hooks', 'm_awl_labels_hooks' );
function m_awl_labels_hooks( $hooks ) {
    $hooks['before_title']['single']['awl_before_title'] = array( 'priority' => 10 );
    $hooks['before_title']['archive']['awl_before_title'] = array( 'priority' => 10 );
    $hooks['on_image']['single']['awl_on_image'] = array( 'priority' => 10 );
    $hooks['on_image']['archive']['awl_on_image'] = array( 'priority' => 10 );
    return $hooks;
}

3. That's it! Now check the individual page of your product - all labels that have Before Title position type and comply with the display rules should be visible on this page just before the product title.

Single product page and labels for it