Tag: 139

By default the WooCommerce product page comes with a classic layout and doesn’t have much flexibility, the product page usually looks boring and non-responsive. For example look at this page,

which has a boring frontend and a lot of text in the description, this also doesn’t look very appealing. Now pages like this will make your site visitors run away. To solve this we will add Gutenberg capabilities to our blog page so our page should look great.

Now to add the Gutenberg feature to your woocommerce, we will need a free plugin called code snippet.

Once the plugin is activated go to the plugin in your right-hand sidebar, add a new snippet

Give a cool name to your snippet and add the below code

// enable gutenberg for woocommerce
function activate_gutenberg_product( $can_edit, $post_type ) {
 if ( $post_type == 'product' ) {
        $can_edit = true;
    }
    return $can_edit;
}
add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );

// enable taxonomy fields for woocommerce with gutenberg on
function enable_taxonomy_rest( $args ) {
    $args['show_in_rest'] = true;
    return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );


REMOVE DESCRIPTION HEADING

// Remove the product description Title
add_filter( 'woocommerce_product_description_heading', '__return_null' );

Once you have added your code make sure you select “Run snippet everywhere”

Give a nice little description to your snippet.

Save and activate your snippet.

With Gutenberg blocks enabled in our product, we can do some amazing things for making our product look awesome, this is how the page looks now.

Few plugins to help you with Gutenberg Layouts

• Stackable
• Block Navigation

Hope this article help you in putting up a great page for your e-commerce site

Adding price from your woo-commerce product page

There are a couple of things I decided to do today, to make my affiliate website look more appealing.

I am writing a top-10 washing machines page for my blog. I wanted to add a price column which is the price of the product from amazon.in on the date when the product is fetched.

A few of the things which I wanted to do is to ensure to add the price code to be added from my amazon product page.

For getting the amazon product onto my blog page I am using wzone importer and wp-automatic

I have enabled woocommerce on my website, with wzone and wp-automatic, I am fetching products from amazon.in and adding them as an affiliate product on my website.

There is no woo_commerce shortcode to just fetch the prices, the generate blocks also don’t provide the capability to add the same to the review page

So I created a child theme from my parent theme and added the below code in my functions.php page

function custom_price_shortcode_callback( $atts ) {

    $atts = shortcode_atts( array(
        'id' => null,
    ), $atts, 'product_price' );

    $html = '';

    if( intval( $atts['id'] ) > 0 && function_exists( 'wc_get_product' ) ){
        // Get an instance of the WC_Product object
        $product = wc_get_product( intval( $atts['id'] ) );

        // Get the product prices
        $price         = wc_get_price_to_display( $product, array( 'price' => $product->get_price() ) ); // Get the active price
        $regular_price = wc_get_price_to_display( $product, array( 'price' => $product->get_regular_price() ) ); // Get the regular price
        $sale_price    = wc_get_price_to_display( $product, array( 'price' => $product->get_sale_price() ) ); // Get the sale price

        // Your price CSS styles
        $style1 = 'style="font-size:40px;color:#e79a99;font-weight:bold;"';
        $style2 = 'style="font-size:25px;color:#e79a99"';

        // Formatting price settings (for the wc_price() function)
        $args = array(
            'ex_tax_label'       => false,
            'currency'           => 'INR',
            'decimal_separator'  => '.',
            'thousand_separator' => ' ',
            'decimals'           => 2,
            'price_format'       => '%1$s %2$s',
        );

        // Formatting html output
        if( ! empty( $sale_price ) && $sale_price != 0 && $sale_price < $regular_price )
            $html = "<del $style2>" . wc_price( $regular_price, $args ) . "</del> <ins $style1>" . wc_price( $sale_price, $args ) . "</ins>"; // Sale price is set
        else
            $html = "<ins $style1>" . wc_price( $price, $args ) . "</ins>"; // No sale price set
    }
    return $html;
 }
 add_shortcode( 'product_price', 'custom_price_shortcode_callback' );

Now adding this simple shortcode on my page, provides me with the quick price from the product page of my website.

USAGE (for example product ID 37):

[product_price id="37"]

This code is tested and works. You will get this:

Posting source code

limit the size of posts on frontpage