Shop - Related Blocks
π Note: These blocks are part of the Otter Blocks plugin, which you can get from here.
π Note: The blocks' appearance can be improved using the Otter features, such as Transform to Sticky, Visibility conditions, Dynamic Values or Images, as well as Counting / Typing / Loading animations, and . Patterns
Build your desired shop page using the Otter dedicated blocks:
Review Comparison Table |
Product Review |
Add to cart button |
WooCommerce Comparison Table |
π Review Comparison Table
π Note: This table works only with the reviews added with the Product Review block, not with the ones added from the website.
In order to use the Review Comparison Table, follow these steps:
- Step 1: Navigate to the desired page and add the Product Review component from the blocks library.
- Step 2: Publish the page, otherwise it will not work.
- Step 3: Repeat the steps above for how many reviews you want to compare.
The next step is to add the Review Comparison Table block. When the block appears, pick the reviews that you want to compare. You can customize the color of the buttons and button text.
π Product Review
Transform your posts into ingenious reviews with ratings and generate edges with a fulfilling product review block. The most powerful feature of this block is the Sync with WooCommerce possibility, which allows you to import information from existing products.
- Styles - some options are available to change the general appearance of the block.
- Product Details - here, you have to insert the product's information, if you create the review for a new product or choose to Sync with WooCommerce ( another option listed down in the sidebar ) and they will be automatically imported.
- Product Features - these can be customized even if you choose to sync with WooCommerce, and for each one of them, you can insert a title and a rating.
- Increase your review's credibility by adding a list of Pros and Cons.
- Cons - add the weak points of the product.
- Links - insert the links of the selling platforms, adding them a label and a sponsored notice.
- Color customizations are also available.
π Note: If you choose to design your own product review, you can use a dynamic image as a Product image.
πNote: If you want to have different colored starts based on the rating, check this doc to learn how.
π Add to cart button
The add-to-cart button represents the button that stays under the product on the Shop Page to ensure the sale process. Pick a product from the list where you want the button to appear ( each product can have a different button ).
The customizations available for this block are divided into five panels:
- Styles - from here you can choose one of the theme's primary or secondary buttons.
π WooCommerce Comparison Table
You can use this block to outline the differences between more products, helping the client choose the best product he needs.
Just add the block, select the products you want to compare from the list and if you need to edit them, click on the pencil icon.
- Settings - from this area, you can select the view type ( row or column ) and enable alternating row color.
- Fields - change the visibility of the fields or reorder them.
- Color - choose the best color combination that suits your theme.
π Note: Unlock more features using the PRO version of the plugin.