SM - HTML Content Block for WooCommerce

• Developed by: Martin Nestorov
  • Explore more at nestorov.dev
• Plugin URI: https://github.com/mnestorov/smarty-html-content-block

Overview

The HTML Content Block for WooCommerce plugin empowers WooCommerce store owners to add customizable HTML content blocks to their product pages effortlessly. Designed with flexibility and usability in mind, it enables seamless content integration directly from the WordPress admin panel.

Description

This plugin is perfect for WooCommerce stores aiming to deliver tailored product information. With support for dynamic placeholders, product loops, and conditions, you can display customized messages, related product sections, or promotional content directly on product pages. The content is stored as HTML files, ensuring better compatibility and portability.

Key highlights include:

• Fully customizable HTML editor with syntax highlighting.
• Support for product-specific information, including variations.
• File-based storage for better management.
• Compatible with all WooCommerce themes.

Features

• Custom HTML Editor: Integrated with CodeMirror for a seamless editing experience, including syntax highlighting and fullscreen mode.
• Dynamic Tags: Use predefined tags to dynamically display product information like titles, prices, and more.
• Conditional Logic: Add conditions and loops to create dynamic, personalized content blocks.
• Support for Variations: Display specific information for product variations.
• Easy-to-Use Interface: Intuitive meta box for content management within the WooCommerce product editor.
• File-Based Storage: Save content blocks as HTML files for better portability and versioning.
• Responsive and Optimized Output: Ensures compatibility across devices and themes.
• Content Preview: Instantly preview your content blocks without saving changes.
• Revisions Management: Automatically save multiple versions of your content blocks, and easily preview or restore previous versions.
• Export/Import Functionality: Export content blocks as JSON files for backup or transfer and import them into other products or sites.

Installation

1. Download: Clone or download the repository from GitHub.
2. Upload: In the WordPress Admin Dashboard, go to Plugins > Add New > Upload Plugin and select the downloaded ZIP file.
3. Activate: Once uploaded, activate the plugin through the Plugins menu.
4. Setup: Navigate to a product page in WooCommerce and start using the "HTML Content Block Editor" meta box.

Usage

1. Access the Editor:

   • Navigate to the desired WooCommerce product.
   • Find the "HTML Content Block Editor" in the product edit page.

2. Customize Content:

   • Use the integrated CodeMirror editor to add HTML.
   • Leverage dynamic tags (e.g., {{product_title}}, {{product_price}}) for dynamic content.

3. Save and Display:

   • Save the product to store your changes.
   • View the product page to see the content displayed below the product summary.

4. Preview Content:

   • Use the "Preview" functionality to see how your content will appear without saving changes.

5. Manage Revisions:

   • View saved revisions in the "Revisions" tab.
   • Preview, Restore, or Delete previous versions of your content block.

6. Export/Import Content Blocks:

   • Use the "Export/Import" tab:
     • Export: Download the content block as a JSON file.
     • Import: Upload a JSON file to recreate a content block.

Dynamic Tags

Here’s a list of supported dynamic tags:

Product-Specific Tags

• {{product_title}}: Displays the title of the current product.
• {{product_price}}: Shows the price of the current product.
• {{add_to_cart_button}}: Adds an "Add to Cart" button for the current product.
• {{product_permalink}}: Provides a link to the current product.
• {{product_image}}: Displays the main image of the current product.

Loop Tags (for use inside {{foreach}} loops)

• {{loop_product_title}}: Title of a product or variation in the loop.
• {{loop_product_price}}: Price of a product or variation in the loop.
• {{loop_product_permalink}}: Permalink of a product or variation in the loop.
• {{loop_product_image}}: Image of a product or variation in the loop.

Conditional Tags

• {{if condition}}...{{else}}...{{/if}}: Adds conditional logic for dynamic output.
  • Example: {{if $product->get_price() > 50}}Premium Product{{else}}Budget Product{{/if}}.

Looping Tag

• {{foreach products="id1,id2,id3"}}...{{/foreach}}: Loops through specified product IDs.

Shortcodes

The SM - HTML Content Block for WooCommerce plugin includes powerful shortcode functionality to embed reusable global elements easily within your content.

Global Element Shortcode

Use the [global_element] shortcode to embed reusable HTML Global Elements directly into your posts, pages, or widgets.

Usage:

[global_element id="123"]

Replace 123 with the ID of the global element you wish to display. This ID can be found in the WordPress admin under HTML Global Elements.

Global Block Shortcode

You can also use the [global_block] shortcode to embed reusable Global Blocks with dynamically processed HTML content:

Usage:

[global_block id="789"]

Replace 789 with the ID of the global block you wish to embed.

How to Find the Element or Block ID:

• Navigate to the WordPress Dashboard.
• Go to either HTML Global Elements or HTML Global Blocks.
• Locate the item you wish to use and copy its ID from the shortcode column.

Shortcode Column in Admin

The plugin provides a dedicated "Shortcode" column in both the HTML Global Elements and HTML Global Blocks admin listings, automatically displaying the shortcode for each item.

Notes:

• Ensure the ID provided is valid and exists.
• Content rendered via shortcodes supports dynamic tags, loops, and conditional logic defined within your global element or global block templates.

Use these shortcodes to efficiently manage and reuse custom HTML blocks across multiple pages or posts, maintaining consistency and ease of content management.

Customization

• Use the dynamic tags to create custom content blocks.
• Customize the display using inline styles or your theme’s CSS.
• Combine loops and conditions for advanced dynamic content.

Error Handling and Debugging

• File Save Issues: Ensure the plugin's file directory (html-content-blocks/) has proper write permissions.
• Dynamic Tags Not Replaced: Verify the correct use of tags and conditions. Check the console for any logged errors.
• Debugging:
  • Enable WordPress debugging (WP_DEBUG) to capture any errors.
  • Monitor error logs for plugin-specific issues.

Frequently Asked Questions

Q: Can I use this plugin with any WooCommerce theme?
A: Yes, the plugin is designed to be theme-independent and works across all WooCommerce-compatible themes.

Q: How do I add a dynamic tag?
A: Simply include a supported tag (e.g., {{product_price}}) in the HTML editor, and it will be replaced with the appropriate value during rendering.

Q: How do revisions work? A: Every time you save changes, the previous version is saved automatically as a revision. You can preview or restore older versions from the "Revisions" tab.

Q: How do I export or import content blocks? A: Go to the "Export/Import" tab to download a JSON file of your content or upload one to recreate the block.

Q: Can I add multiple content blocks?
A: The plugin supports a single block per product but allows for extensive customization within the block.

Q: How can I debug my content block?
A: Enable debugging in WordPress and check for logged errors. Ensure all dynamic tags are used correctly.

Changelog

For a detailed list of changes and updates made to this project, please refer to our Changelog.

Support The Project

If you find this script helpful and would like to support its development and maintenance, please consider the following options:

• Star the repository: If you're using this script from a GitHub repository, please give the project a star on GitHub. This helps others discover the project and shows your appreciation for the work done.

• Share your feedback: Your feedback, suggestions, and feature requests are invaluable to the project's growth. Please open issues on the GitHub repository or contact the author directly to provide your input.

• Contribute: You can contribute to the project by submitting pull requests with bug fixes, improvements, or new features. Make sure to follow the project's coding style and guidelines when making changes.

• Spread the word: Share the project with your friends, colleagues, and social media networks to help others benefit from the script as well.

• Donate: Show your appreciation with a small donation. Your support will help me maintain and enhance the script. Every little bit helps, and your donation will make a big difference in my ability to keep this project alive and thriving.

Your support is greatly appreciated and will help ensure all of the projects continued development and improvement. Thank you for being a part of the community! You can send me money on Revolut by following this link: https://revolut.me/mnestorovv

---

License

This project is released under the GPL-2.0+ License.