How to add price comparison blocks to WooCommerce

Follow these steps to integrate Content Egg price comparison blocks into your WooCommerce templates.

1. Configure Shortcodes in Content Egg Settings

Go to Content Egg > Settings > WooCommerce and add the desired CE shortcodes for price comparison into the following fields:

  • Add Shortcode to Single Product Pages

  • Add Shortcode to Archive Pages

After adding the shortcodes, the price comparison blocks will appear on:

  • Single Product Pages (e.g., example view below):

  • Archive Pages (e.g., example view below):

2. Remove the Default WooCommerce "Buy Now" Button and Price (Optional)

If you want to remove the default WooCommerce "Buy Now" button or price display, here are your options:

  1. Using Theme Settings: Many themes allow you to control page elements directly. Go to: Appearance > Customize > WooCommerce > Single Products/Product Archives.

    From here, you can hide or modify elements like the "Buy Now" button or price.

  1. Using Custom CSS: A simple solution is to hide these elements with custom CSS. For example:

.woocommerce div.product .single_add_to_cart_button {
    display: none;
}
.woocommerce div.product .price {
    display: none;
}
  1. Using Hooks: In some cases, WooCommerce hooks can be used to remove specific elements. Add the following code snippet to your theme's functions.php

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);

Need Help?

The exact steps to remove the button or price depend on the theme you're using. For detailed instructions, refer to your theme's documentation or contact your theme's support team for assistance.

Last updated