Home Tutorials How to Add WooCommerce Quick View Without a Plugin

How to Add WooCommerce Quick View Without a Plugin

Need to make it simpler in your prospects to study extra about your merchandise and add them rapidly to their purchasing carts? A product fast view field helps you just do that.

It exhibits guests key data such because the product value, a quick description, buyer scores, colour and dimension variants, full with an add-to-cart button.

Though WooCommerce doesn’t provide a native fast view choice, you may add it by utilizing third-party instruments.

Technically, you could possibly use a plugin to add the short view performance to your WooCommerce retailer, however putting in too many plugins can lead to website crashes, sluggish web page hundreds, and safety breaches.

So on this tutorial, I’ll present you the way to add a fast view modal field to your WooCommerce merchandise with out utilizing a plugin. 

1. Set up the Botiga WooCommerce Theme

The simplest manner to add the short view performance to your retailer is by utilizing a WooCommerce theme that features this function, akin to our free Botiga theme. 

As well as to enabling you to add a fast view field to your merchandise, Botiga comes with tons of design and eCommerce options — as an example, you may create your personal colour palette, customise the format of your purchasing cart and product galleries, add product filters and badges, and extra.

To get began, obtain the theme, and set up it from the Look > Themes > Add New > Add Theme menu:

Uploading the Botiga theme

Alternatively, it’s also possible to go to Look > Themes > Add New, and kind ‘botiga’ into the search bar.

When the theme seems, click on the Set up button:

Adding the Botiga theme from the WordPress repo

After putting in the theme in your website, click on the Activate button.

2. Import a Starter Website (non-compulsory)

A starter website is a pre-built demo that you may import to your personal web site in simply a few clicks.

Botiga presently has one free (Magnificence) and 4 premium (Attire, Furnishings, Jewellery, Single Product) starter websites. On this tutorial, I’ll use the free Magnificence demo — you may take a look at all of the starter websites right here.

Should you don’t need to use any of the pre-built demos, it’s also possible to add your personal content material from scratch to your Botiga retailer.

To search out the starter websites, click on the Look > Starter Websites menu in your WordPress dashboard.

Hover your cursor over the demo you need to set up and click on the Preview Demo button to preview it.

Should you prefer it, click on Import to set up the pre-built content material and design settings in your web site:

Botiga starter sites

The Import Theme modal will present you the plugins and content material that shall be imported to your web site. 

You could have the choice to decline to import any of the plugins and content material, however I like to recommend importing every thing:

Botiga demo import tool, user interface

3. Open the Customizer

The preliminary steps are over. Now, I’ll present you the way to add the WooCommerce fast view function to your retailer. 

In your WordPress admin space, go to Look > Customise to open the Customizer the place you may entry the short view performance:

Customizer settings in WordPress

4. Allow the Quick View Button for Your Merchandise

The Customizer opens on the left facet of the display. Botiga has tons of choices right here you may select from.

To entry the short view function, go to WooCommerce > Product Catalog > Normal:

Product Catalog option

Within the Normal tab, you must see a Product card choice. Choose it, and the merchandise will broaden:

Expanding the product card option

Now, scroll down to the Quick View choice.

As you may see within the screenshot under, the Quick View button is already enabled in your website:

Botiga quick view layout

To examine what the button seems to be like on the frontend of your web site, open your Store web page. Should you imported the Magnificence demo, you’ll discover a hyperlink to the store within the prime menu.

Hover your cursor over any of the product photos, and the Quick View button will seem:

Quick view button in the middle of product image

The Quick View button seems each time a group of merchandise is proven on the identical web page.

For instance, within the Magnificence demo, the Featured Assortment part additionally exhibits the Quick View button for each product: 

Quick View button on the Featured Collection block

As Botiga is a responsive theme, the Quick View button additionally works on cell — a gentle faucet on the product picture will present it:

Botiga Quick View button on mobile

5. Select a Format for Your Quick View Buttons

You should have seen that there are three Quick View format choices:

Botiga quick view layouts

The primary one fully removes the Quick View buttons out of your website.

The second choice exhibits the button in the course of the product picture (that is the default setting):

Quick view button in the middle of product image

And the third choice shows the Quick View button on the backside of the product picture:

Quick View button at the bottom of the product image

In order for you to swap between the layouts, choose the choice you need to use, and hit the Publish button on the prime of the Customizer: 

Switch between Quick View button layouts

6. Add or Take away Components within the Quick View Field

The Quick View modal accommodates the identify of the product, the worth, a quick description, a amount counter, a trendy add-to-cart button, the product photos, and the product class:

Botiga Quick View box

Should you don’t see a few of these parts in your fast view field, you may add them from the Card Components choice, which may be discovered proper under the Quick View setting. 

Click on on the attention icon subsequent to the ingredient you need to add, and it’ll seem inside the short view field.

Eradicating parts works the identical manner. Click on on the attention icon to disable a component, and it’ll disappear from the short view field:

Removing elements from the Quick View box

7. Add Extra Merchandise to Your Retailer

You possibly can add extra merchandise to your retailer from the Merchandise > Add New admin menu. This feature is just not situated within the Customizer — to entry it, you want to return to your WordPress dashboard.

Shut the Customizer, and click on Merchandise > Add New within the left sidebar of your admin space. The product editor will seem in your display.

Fill within the title, description, product picture, product gallery, product classes, product tags, and product information/metadata fields:

Populating a WooCommerce product page

Be aware that for those who add greater than three photos to the product gallery, solely the primary three photos shall be proven within the fast view field by default.

Nevertheless, customers can entry the remainder of the photographs by clicking the arrow icon:

Multiple product images in the quick view box

I like to recommend previewing the web page as you’re filling up the product particulars utilizing the Preview Adjustments button. Don’t fear about making errors — you may all the time come again and modify the product particulars.

When you’re prepared, hit the Publish button, and the brand new product will seem in your Store web page. 


WooCommerce is a unbelievable plugin for organising a web based retailer with WordPress. Nevertheless, there are some options, e.g. the product fast view performance, that it doesn’t provide out of the field.

Fortunately, a high-quality WooCommerce theme akin to Botiga can fill that hole. All you want to do is set up and activate the theme, go to the Customizer, and select a fast view format.

As well as to the short view performance, Botiga contains a number of helpful eCommerce options.

For instance, you may add a hover impact to your product photos, improve your product galleries with movies, create your personal colour palette, and extra.

To see what Botiga can do for you, obtain the theme without cost or take a look at the demos.

I hope you discovered this tutorial useful. You probably have any questions or ideas about including the short view performance to your WooCommerce retailer, depart us a remark under.