How to Add Overlay Product Box in WordPress (Step-by-Step Guide)

Install Unlimited Elements Blocks Library

• Go to the Unlimited Elements plugin page on WordPress.org.

• Click Download, then in your WordPress dashboard, go to Plugins → Add New → Upload Plugin and upload the ZIP file.

• Click Install Now and then Activate to enable the plugin.

Open the Blocks Library

• From your WordPress dashboard, go to Unlimited Elements → Blocks Library.

• This is where all available blocks are listed and managed.

Search for the Overlay Product Box Block

• Use the search bar at the top right and type “Overlay Product Box”.

• The Overlay Product Box block will appear in the results list.

Install the Overlay Product Box Block

• Hover over the Overlay Product Box block and click Install.

• This adds the block to your available options in the editor.

Add Overlay Product Box to a WordPress Page

• Open any page or post using the WordPress block editor.

• Click the (+) Add Block button, search for “Overlay Product Box”, and insert it into the page.

Customize the Overlay Product Box Block

Once added, select the Overlay Product Box block and use the settings panel on the right. Adjust the Product Source to connect to a specific product, choose the visibility of the Overlay Content (Title, Price, Rating), and control the Overlay Effect (Fade/Slide Up) and Transition Speed. Customize the Styling for the Overlay Background Color and Opacity, Overlay Typography, and Add to Cart Button to create a functional, visually appealing product showcase that fits your site’s design.