How to show featured products before the rest?

About this:

With this guide you can push a row of featured products on the shop page above the rest. You can adjust the amount of items and columns and choose in which order they should be shown.

Requirements

There are multiple ways to make these edits. Most of them are good too but these requirements are free and will be a great help to make changes to templates and more.

• FileZilla for transferring files. Download FileZilla
  You will need FTP details  from your hosting to connect. If you don’t want to use FileZilla/FTP, your file manager in hosting panel will do just fine.
• Visual Studio Code* for editing files. Download Visual Studio Code
  Any other file editor will work, or even notepad. A code editor is only there to make it more readable for us.
  _{* = Not to be confused with Visual Studio}
• Flatsome Child Theme*
  _{* = Don’t have a child theme installed? Read this}

Explaining the child theme

Why a Child Theme?

A Child Theme is a fundamental part of editing templates which is often overlooked. Why is it important? The Flatsome main theme is updated regularly which essentially replaces and overwrites files. The child theme is separate and will not receive these updates so all files within will not be edited/overwritten/replaced. This way you don’t have to edit the template every time there is an update.

Declaring paths

As files are an addition on the main theme, most functionalities are looking in specific folders. The path must be the same as the main file or it will not be found. Example:

flatsome/woocommerce/global/wrapper-start.php   <- for this to be found we need:
flatsome-child/woocommerce/global/wrapper-start.php

We will go over this in step 3.

Good to know; you don’t need everything from these folders. In this case an empty woocommerce folder is viable.

Step 1: Copying the template

1. Find and download the file wrapper-start.php (do not remove it). Usually found here:
   public_html(or www)/wp-content/themes/flatsome/woocommerce/global/wrapper-start.php
2. Open the downloaded file wrapper-start.php with your file editor. (do not rename it)

Step 2: Editing the template

Add the following code just before the ‘?>’ above the shop-container .

if ( is_shop() ) { 
        echo do_shortcode('[featured_products columns="3" limit="3" orderby="rand"]'); 
} 

It should look like this now:

<?php
/**
 * Content wrappers
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     3.3.0
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}
  
if ( is_shop() ) { 
    echo do_shortcode('[featured_products columns="3" limit="3" orderby="rand"]'); 
} 
?>
<div class="shop-container">

You can change how many items and how many columns per row by changing the numbers within the shortcode.

For ordering you can change the “rand” for the following options:

• date – The date the product was published.
• id – The post ID of the product.
• menu_order – The Menu Order, if set (lower numbers display first).
• popularity – The number of purchases.
• rand – Randomly order the products on page load (may not work with sites that use caching, as it could save a specific order).
• rating – The average product rating.
• title – The product title. This is the default orderby mode.

Step 3: Upload the template

1. If not existing: create a folder ‘woocommerce’ in the child theme. Usually named flatsome-child:
   public_html(or www)/wp-content/themes/flatsome-child/
2. If not existing: create a folder ‘global’ in the woocommerce folder:
   public_html(or www)/wp-content/themes/flatsome-child/woocommerce
3. Upload the wrapper-start.php to this folder:
   public_html(or www)/wp-content/themes/flatsome-child/woocommerce/global/

Credits:

Idea, function and code provided by: Mitchell Krog