Custom Product Styles | WordPress Plugin

For a long time, I was scared of looking into plugin or theme development. I thought it will be too hard to understand and there were so many new terms like ‘hooks’ which I didn’t understand. I had very limited experience with WordPress backend at that time, but by some miracle, I had gotten the best mentor you could ever ask for and nothing was too hard anymore ?

In this post we’ll re-create one of my simple WordPress plugins from scratch. We’ll go trough the stages of planning and discuss dependencies.

1. Why do you want to create a plugin?
2. What do you need to create a plugin?
3. Making of: Custom Product Styles
4. Publishing your plugin

Why do you want to create a plugin?

When planning anything tech related, personally I use the MoSCoW method help me do it. If you’ve never heard of it visit this blog post to find out more.

Plugin we’re making here helps us ‘prettify’ standard styling and colours of WordPress Product Shortcodes. These product shortcodes are particularly useful when trying to increase conversion rates trough your blog posts or pages. It allows your visitors to add a product to cart without leaving the page and making a whole big journey. One click and they’re at the checkout.

By default, these product shortcodes are styled to match WooCommerce theme, focusing on purple. They have white or transparent background without any nice shadows or borders.

We’re here to change that!

What do you need to create a plugin?

I’m going to assume this is the first plugin you’ve ever made and start from the beginning. We’re going to need an IDE of your choice, I prefer PHP Storm (licenced) or Visual Studio Code (free to download).

1. Let’s create a folder for all our files to live in and call it custom_product_shortcodes
   
2. Inside of it, we’ll need to make a new PHP file. We’ll name ours, custom_product_shortcodes.php
   
3. Inside of your new PHP file, at the very top, we’ll add our plugin information such as Plugin Name, Description and Author.
   
   Take a look at an example below:

<?php
/******************************************************************
* Plugin Name: Custom Products Styles
* Plugin URI: https://likiipedia.com
* Description: Loads custom styles for WooCommerce products when used with shortcodes on any page or blog post. Compatible with Elementor. 
* Version: 0.0.1
* Author: Likiipedia
* Author URI: https://likiipedia.com
******************************************************************/

Making of: Custom Product Styles

After we’ve made our plugin information all nice and clean we can begin adding some logic. The only thing our plugin will be able to do at this point will be to register and load a new CSS sheet. This new CSS stylesheet will then override the rules WooCommerce set for their default product styles.

To do this we need to create a PHP function:

/**
 * Register the new stylsheet and then enqueue it
 */

function insert_shortcode_css () 
{
 ...
}

We named our function insert_shortcode_css () and we didn’t give it anything to do, so let’s fix that by adding a bit of code to register our new stylesheet.

/**
 * Register the new stylsheet and then enqueue it
 */

function insert_shortcode_css () {

 wp_register_style( 'shortcode_styles', plugins_url( 'custom_product_shortcodes/assets/css/light_green.css' ) );
 

}

Here we’re saying we have a stylesheet we’d like to use and we’re showing where does it live, but no actual action has been made just yet.

/**
 * Register the new stylsheet and then enqueue it
 */

function insert_shortcode_css () {

 wp_register_style( 'shortcode_styles', plugins_url( 'custom_product_shortcodes/assets/css/light_green.css' ) );

 wp_enqueue_style( 'shortcode_styles' );

}

Now we’ve basically said ‘this stylesheet I told you about earlier, you can use it’. Still no action has been made and no difference can be seen.

add_action( 'wp_enqueue_scripts', 'insert_shortcode_css' );

For the code to work, we need to use a webhook called ‘add_action’. These webooks will ensure ‘something’ happens at specific points during execution, or when specific events occurs. You can read more about it here.

Right now, our PHP file should be looking clean and contain our code from earlier. But we still haven’t written a single line of CSS to load.

Let’s get to that now!

Add content to your CSS stylesheet

Again, at the top of every file you make, we need to add our plugin information. So let’s just paste it in:

/******************************************************************
* Plugin Name: Custom Products Styles
* Plugin URI: https://likiipedia.com
* Description: Loads custom styles for WooCommerce products when used with shortcodes on any page or blog post. Compatible with Elementor. 
* Version: 0.0.1
* Author: Likiipedia
* Author URI: https://likiipedia.com
******************************************************************/

Once we’ve added our plugin information we can start adding our CSS.
I’m going to post a snippet or two from ‘light_green.css’ stylesheet we’ve registered and enqueued above.

/****************************/
/* 2 columns - LIGHT GREEN */
/****************************/


/** PRODUCT BACKGROUND **/
.woocommerce.columns-2 li.product {
    background-color: #E0EDE7;
    box-shadow: 1px 2px 12px -3px #E0EDE7;
}

/** PRODUCT TITLE **/
.woocommerce-loop-product__title {
    color: #225B42;
    margin-left: 15px;
    font-size: 2.3rem;
}
/** PRODUCT PRICE **/
ul.products li.product .price {
    font-size: 20px;
    margin-left: 1em;
    color: #225B42;
    margin-bottom: 0rem;
}

/** CTA **/
ul.products li.product .button {
    font-size: 18px;
    font-weight: bold;
    margin-top: 1.3rem;
    background-color: #D6492B;
    margin-left: 1em;
    margin-bottom: 1em;
}

You can see we’ve added some changes to product background, we’ve changed the size and colour of the title and product price, as well as making our call-to-action (button) a bit nicer.

Publishing your plugin

To be able to use your new plugin you’d need to connect to your WordPress website and drop the whole plugin folder you’ve just made into ‘Plugins’ folder in your site’s repository.

The last thing you need to do is visit ‘Plugins’ tab on your website and ‘Activate’ the plugin. You’ll now be able to use the new styles with the default WooCommerce product shortcodes ?

Came this far? Let me know what you think ?

You can find the whole project on my GitHub by clicking here.