Wednesday, May 17, 2023

How to Create an Affiliate Product Box (No Coding Required)

Do you want to create an affiliate product box in WordPress?

A product box allows you to showcase your affiliate products in a more attractive and eye-catching manner. It can capture your user’s attention and increase the chances of them clicking on your affiliate links.

In this article, we will show you how to easily create an affiliate product box in WordPress.

Creating an affiliate product box in WordPress

Why Create an Affiliate Product Box in WordPress?

An affiliate product box is used by marketers on their WordPress websites to showcase and promote specific products to readers.

This box usually contains a product title, images, description, and a call to action (CTA) to promote clicks and purchases.

Affiliate product box preview

It is a popular affiliate marketing strategy that can boost sales, increase brand exposure, and save time and resources.

You can easily add an affiliate product box to a blog post to attract potential customers and earn a commission on any resulting sales.

That being said, let’s see how you can easily create an affiliate product box in WordPress without using any code.

You can easily create a product affiliate box using Pretty Links. It is the best affiliate marketing tool that makes it super easy to create and manage affiliate links on your WordPress website.

First, you need to install and activate the Pretty Links plugin. For more instructions, please see our beginner’s guide on how to install a WordPress plugin.

Note: Pretty Links also has a free version. However, you will have to purchase the pro version to use the Product Displays addon.

Upon activation, visit the Pretty Links » Add-ons page from the WordPress admin sidebar.

From here, simply install and activate the ‘Product Displays’ addon by clicking on the ‘Install Add-on’ box button.

Install and activate the Product Displays addon

Once the addon has been activated, just head over to the Pretty Links » Add New page to start creating an affiliate link.

First, you will have to type the affiliate product name into the ‘Add Title’ field at the top. This title will be displayed as a heading in your product affiliate box.

After that, go ahead and type the affiliate URL into the ‘Target URL’ box.

Next, type the link slug into the ‘Pretty Link’ box. This will be the last part of the affiliate URL.

Create an affiliate link by typing the target URL

After that, simply switch to the ‘Product Display’ tab from the sidebar on the left.

Once you are there, you can start by choosing a theme for your product affiliate box from the ‘Theme’ dropdown menu.

Next, click on the ‘Update Image’ button to upload the product image from the WordPress media library or your computer.

Choose a theme and upload product image

After you have done that, simply type the product description into the ‘Description’ box.

Next, go ahead and set a price for the product in the ‘Price’ box.

Add product description and price

You can also add a badge at the top of your product affiliate box. For example, if the item you are promoting is currently on sale, then you can show this to customers.

To add a badge, simply type the text for it into the ‘Badge Text’ box.

After that, enter a CTA for the affiliate product into the ‘Primary Button Text’ box. This will be the text displayed on the button within the product affiliate box.

The affiliate link we created will be automatically added to the CTA button.

Add a badge and CTA text

If you have written a review of the affiliate product on your blog, you can add the post’s URL to the ‘Review URL’ box. Readers who click on it will be taken to your review post.

To add a CTA for the review button, simply type some text in the ‘Review Button Text’ option.

Once you are done, click on the ‘Update’ or ‘Publish’ button at the top.

Add the Product Affiliate Box to a Page or Post

Now, you need to add the product affiliate box to a page or post on your WordPress website. For this tutorial, we will be adding the affiliate product box to a post.

First, you need to open up a new or existing post from the WordPress admin sidebar.

Next, click on the ‘Add Block’ (+) button at the top left corner to locate and add the PL Product Display block to the block editor.

After that, click on the ‘Add Display’ button.

Add the PL Product Display box

This will open up a ‘Product Display’ prompt. From here, simply choose the ‘Single Link’ option from the dropdown menu.

Once you do that, you will have to search for the affiliate link you created in the search box.

Add the affiliate product box

Upon clicking on the affiliate link, the product display box will be automatically added to your post or page.

Finally, click on the ‘Update’ or ‘Publish’ button to save your changes.

Now you can visit your website to check out the product affiliate box in action.

Product box preview

Method 2: Create an Affiliate Product Box in the Block Editor (Free)

For this method, we will show you how to easily create an affiliate product box using the block editor.

First, you need to open an existing or new post from the WordPress admin sidebar.

Once you are there, click on the Add Block ‘(+)’ button in the top-left corner to open the block menu. Next, simply look for and add the Columns block to the post.

Once you have done that, a list of column variations will be displayed. Simply click on the 50/50 variation to continue.

Add the Columns block in the block editor

This will add two side-by-side blocks to your post.

You can start by clicking on the ‘+’ button on the left side of the screen to open the block menu.

From here, simply choose the Image block and then add your affiliate product image from the WordPress media library.

Add the image block and then add product image from the media library

After that, you need to click on the ‘+’ button in the right column.

Once the block menu opens up, add the Heading block and type in the product title.

Add the Heading block and type product title

Next, simply click on the ‘Select Column’ icon from the block toolbar and then click on the ‘+’ button at the bottom. This will open up the block menu again.

From here, locate and add the Paragraph block and type a product description into the box.

Add the Paragraph block to type product descriptions

Now, to complete your product affiliate box, you will have to add a CTA along with an affiliate link for the product.

To do that, you will need to exit the block editor.

Don’t forget to click on the ‘Save Draft’ button to save your changes before going back to the WordPress admin dashboard.

Create an Affiliate Link

There are many affiliate marketing tools that you can use to create and manage affiliate links on your WordPress website.

For this tutorial, we will be using Pretty Links, which is the best WordPress affiliate marketing plugin.

First, you need to install and activate the Pretty Links plugin. For more instructions, please see our beginner’s guide on how to install a WordPress plugin.

Upon activation, head to the Pretty Link » Add New page from the WordPress admin sidebar.

Once you are there, you have to type the product name in the ‘Add Title’ field.

Next, simply copy and paste your affiliate product URL into the ‘Target URL’ box.

Create pretty link

You can now enter a custom URL slug in the ‘Pretty Link’ box. Pretty Links will use this at the end of the affiliate URL that it creates for you.

Once you are done, click on the ‘Update’ button to generate your affiliate link.

You will now be redirected to the ‘Links’ page. From here, simply copy the affiliate link from the ‘Pretty Links’ column.

Copy the affiliate link

Add an Affiliate Link to the Product Box

Next, you need to head back to the blog post where you were creating the affiliate product box.

Once you are there, just click on the right column of your Columns block to open up the block toolbar, followed by the ‘Select Columns’ button. This will open the block menu.

Next, simply add the Buttons block.

Add the buttons block in the right column

To add a link, click on the ‘Link’ icon in the ‘Buttons’ block toolbar. This will open a popup box where you must paste the affiliate link you copied from the Pretty Links page.

You can also search for the affiliate link using the search bar in the box.

Add an affiliate link

Lastly, you will need to add some text to your CTA button.

Make sure to add an exciting phrase as your CTA to encourage customers to click on the link.

Type CTA text

You can also style your affiliate product box using block settings. To do this, simply click on the ‘Styles’ icon in the Block Settings column.

From here, you can choose the background and text color of your affiliate product box using the Color Picker.

Choose a background color for the product affiliate box

Finally, click on the ‘Publish’ or ‘Update’ button to save your changes.

This is how the affiliate product box looked on our demo website.

Product affiliate box preview

Method 3: Create a Product Box For Affiliate Landing Pages Using SeedProd

If you want to create an aesthetically-pleasing product box for custom affiliate landing pages, then this method is for you.

You can use SeedProd, which is the best WordPress page builder plugin on the market. It helps you create a visually-appealing website without any code.

First, you need to install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Note: SeedProd also offers a free version. However, we will be using the premium version because it offers more design features.

Upon activation, you must visit the SeedProd » Settings page to enter the plugin license key.

You can find this information in your account on the SeedProd website.

Paste license key in the field

Next, simply head over to the SeedProd » Landing Pages section from the WordPress admin dashboard and click on the ‘Add New Landing Page’ button.

For this tutorial, we will be adding an affiliate product box to a landing page.

Click the Add New Landing Page button

You will now be taken to the ‘Choose a New Page Template’ screen.

From here, you can choose any of the pre-made templates offered by SeedProd.

After you have made your choice, you will be asked to enter a page name and choose a URL. Go ahead and click on the ‘Save and Start Editing the Page’ button after entering the details.

Enter your page details

This will launch SeedProd’s drag-and-drop page builder.

From here, find the Columns block in the left sidebar and drag it onto the design interface on the right.

Upon adding the block, you will be asked to choose a column layout. You need to simply click on the 50/50 variation to add two side-by-side blocks.

Add the Column Block in SeedProd

You can now start by dragging and dropping the Image block into the left column.

Next, click on the Image block to open up its block settings in the sidebar. From here, simply click on the ‘Use Your Own Image’ button to select the affiliate product image from the media library or upload it from your computer.

Choose an affiliate product image from the media library

After that, just drag and drop the Heading block into the right column and add the affiliate product title.

You can adjust the alignment and font size using the settings in the left sidebar.

Add the heading block and type product title

Once you have done that, you need to drag and drop the Text block under the product title. You can add a description for the affiliate product you are promoting.

After that, simply click on the ‘Save’ button to store your changes.

Add product description and click Save button

Now it is time for you to create an affiliate link.

Create an Affiliate Link

First, you need to install and activate the Pretty Links plugin. For more detailed instructions, please see our beginner’s guide on how to install a WordPress plugin.

Upon activation, go to the Pretty Link » Add New page from the admin sidebar.

Here, you can start by typing the product name in the ‘Add Title’ field to make it easy to find the affiliate link. Simply enter the name of the affiliate company or the product itself.

Next, add the affiliate link next to the ‘Target URL’ option.

After that, type a slug into the ‘Pretty Link’ box. This slug will appear at the end of your affiliate link.

Create an affiliate link

Finally, go ahead and click on the ‘Update’ button to generate the link.

You will now be redirected to the ‘Links’ page. From here, simply copy the affiliate link from the ‘Pretty Links’ column.

Copy the affiliate link

Add the Affiliate Link to the SeedProd Product Box

After copying the affiliate link, you need to open the SeedProd landing page where you are designing the affiliate product box.

Once you are there, simply drag and drop the Button block under the product description.

Drag and drop the Button block in the product box

Next, you need to click on the button to open up its block settings in the left sidebar. Here, you must copy and paste the affiliate link into the ‘Link’ box.

After that, just enter some text for the CTA into the ‘Button Text’ box.

Add the affiliate link and CTA text

To style the affiliate product box, you need to select the Columns block to open up its settings in the left sidebar.

From here, you can choose a background color or even add a background image to your product box. You can also adjust the width and alignment of the Columns block according to your liking.

Change the affiliate product box background color in SeedProd

Once you are done, click on the ‘Save’ button to store your settings.

This is how the affiliate product box looked on our demo website.

SeedProd preview of the affiliate product box

We hope this article helped you learn how to add an affiliate product box in WordPress. You may also want to see our article on how to easily add an affiliate program in WooCommerce and our top picks for the best affiliate tracking and management software for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create an Affiliate Product Box (No Coding Required) first appeared on WPBeginner.


May 17, 2023 at 04:00PM

Tuesday, May 16, 2023

How to Create a File Upload Form in WordPress

Do you want to enable your website visitors to upload files on your contact form?

Maybe you are hiring employees and want to collect resumes, or perhaps you are running a photography contest where you need the applicant to attach files.

In this article, we will show you how to easily create a file upload form in WordPress.

Creating a File Upload form in WordPress

Why Create a File Upload Form in WordPress?

If you want to collect any kind of file from your users on your WordPress website, then a file upload form is a great idea.

You can let users upload images, PDF files, Word documents, or other types of files.

Using a file upload form makes life easy for you and your users. Instead of the email back-and-forth, you can create a form that includes all the fields you need, so you can collect all information at once.

Also, your form should automatically save the form data in your WordPress database. That way, you can easily find the submissions, even if you miss or delete an email.

That being said, let’s take a look at how to create a file upload form in WordPress.

How to Create a File Upload Form in WordPress

For this tutorial, we will be using WPForms, which is the best contact form plugin for WordPress.

First, you will need to install and activate the WPForms plugin. For more detailed instructions, check out our step-by-step guide on how to install a WordPress plugin.

Note: WPForms also offers a free version. However, you will need the Pro version of the plugin to unlock the file upload form template.

Upon activation, head to the WPForms » Add New page from the WordPress admin sidebar.

This will take you to the ‘Search Template’ page, where you can start by naming your form. You need to also look for the file upload form template in the search box on the left.

Next, simply click the ‘Use Template’ button under the ‘File Upload Form’ option.

Choose the File Upload form template

You will now be taken to the WPForms builder, where the File Upload Form will be automatically created for you.

You can use the file upload form template without making any changes, or you can also drag and drop form fields from the ‘Add Fields’ sidebar.

File Upload form will now be automatically created for you

Next, click on the ‘File Upload’ field in the form to open up its settings in the left column.

By default, you can upload different types of files in the form, including:

  • Image files: .png, .gif, .jpg
  • Documents: .doc, .xls, .ppt, .pdf
  • Audio: .wav, .mp3, .mp4
  • Video: .mpg, .mov, .wmv

All you have to do is type the file formats that you want to accept into the ‘Allowed File Extensions’ box.

For this tutorial, we are going to allow the image formats .png, .gif, and .jpg. Make sure to separate each file format with a comma.

Type file extension type

Note: WordPress limits the types of files that can be uploaded to the site for WordPress security reasons. You can add additional file types to WordPress if you want to allow users to upload file types that aren’t normally allowed.

You can also set a maximum file size and a maximum number of files. For our tutorial, we are going to allow people to submit up to 3 photos of up to 50MB each.

If you want to prevent people from submitting the form without attaching their file(s), you can toggle on the ‘Required’ switch. This means the form can’t be submitted unless at least 1 file has been uploaded.

Choose file size and the number of files to be uploaded

Next, simply switch to the ‘Advanced’ tab from the top.

By default, the File Upload Field uses a modern format that lets users drag and drop their files.

However, if you have limited space for your form, or you prefer a classic upload field, you can change this. Simply select the ‘Classic’ option from the ‘Style’ dropdown menu.

Tip: The classic upload field only allows one file to be uploaded. If you want users to be able to submit more than one file, you will need to add multiple File Upload Fields to your form.

Choose the Classic option as the form style from the dropdown menu

You can also choose to store the submitted files in the WordPress Media Library by toggling on the ‘Store file in WordPress Media Library’ switch. This makes it easy for you to add the uploaded files to a post or page.

For instance, if we are running a photography competition, then we may want to include the best photos when we announce the winner.

Note: The uploaded files will still be saved in your WordPress database, even if you don’t check this box. They are just stored in a separate folder in your WordPress hosting account.

Toggle the switch to allow the form to store files in the media library

If you want to edit any of the other fields on your form, you can click on them to open the field’s settings in the left column.

You can also add other fields to your File Upload form.

For example, you may want to add a Website/URL field to the form so that users can give you the link to their website.

Save the form after adding additional fields

Once you are happy with your form, click the ‘Save’ button in the top right corner of the screen to store your settings.

Setting Up Your File Upload Form’s Notifications

To change the notification settings for the form, you need to open the ‘Settings’ tab in the left corner. Once you are there, simply click on the ‘Notifications’ tab.

By default, the form sends an email notification to {admin_email}.

If you created your WordPress site by yourself, then this will be your email address. If not, then you can delete {admin_email} and type your own email address here instead.

Change the email address the receives the notifications

If you are not sure if {admin_email} is your email address, simply visit the Settings » General page from your WordPress admin dashboard.

Once you are there, look for the Administration Email Address. You can now change the admin email address from here.

Check the admin email

Once you are done, don’t forget to click the ‘Save Changes’ button to store your settings.

If you want the submitted files to be sent to more than one person, then you may want to see our tutorial on how to create a contact form with multiple notification recipients.

You can also change the confirmation message that users see after the form is submitted.

To do this, you need to visit the Settings » Confirmations page from the left column. Then, simply type the message into the ‘Confirmation Message’ box. You can also add formatting like bold and italics.

Change the confirmation message

Finally, don’t forget to save your form once you have made the changes.

You can exit the form builder by clicking the ‘X’ in the top right.

Adding the File Upload Form to Your Website

Once you have finished creating your form, you will need to add it to your website.

To do this, you must open an existing or new post or page from the WordPress admin sidebar. For this tutorial, we are going to add the File Upload form to a new page.

Once you are there, click on the Add New Block ‘(+)’ button in the top left corner of the screen and find the WPForms block.

Locate and add the WPForms block

Upon adding the block, you will see a WPForms dropdown menu displayed on the page.

Go ahead and select the File Upload form that you just created.

Choose the File Upload form from the dropdown menu

Finally, click the ‘Publish’ or ‘Update’ button to save your changes.

You can now visit your website to see the File Upload form in action.

File upload form preview

You can also make changes to your form anytime by visiting the WPForms » All Forms page from the admin sidebar.

From here, simply click on the name of the form, or hover your mouse over it and click the ‘Edit’ link to open up the form builder.

Edit form

When you edit your form, it will be automatically updated on your website, so you don’t need to add it to your page again.

Tip: It’s a good idea to test your form to make sure it’s working as expected. If you don’t get an email notification after creating a form entry, then you can read our step-by-step guide on fixing the WordPress not sending email issue.

Viewing or Downloading the Uploaded Files

When someone sends a file using your file upload form, you can see it in your email inbox or your WordPress dashboard.

With each form entry, you will get an email like this:

Preview of the email you'll receive when someone fills the form

Just click the links to view or download the files themselves.

You can also easily find the files in your WordPress dashboard. Simply go to the WPForms » Entries page and then click on the name of your form.

Choose the file upload form on the entries page

You can see the uploaded files in the table of form entries.

Alternatively, you can click the ‘View’ link to see the full details for each form entry.

View form entries

We hope this tutorial helped you learn how to create a file upload form in WordPress. You might also want to check out our expert picks for the best WordPress survey plugins and read our guide on how to create an email newsletter.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a File Upload Form in WordPress first appeared on WPBeginner.


May 17, 2023 at 03:00AM

How to Add Product Videos to Your WooCommerce Galleries

Are you looking to add product videos to your WooCommerce product galleries?

Videos can provide more detailed and engaging demonstrations of your products. Additionally, they can help make your WooCommerce store more visually appealing and engaging.

In this article, we will show you how to add WooCommerce product videos to your online store.

Adding product videos to your WooCommerce gallery

Why Add WooCommerce Product Videos to Your Store?

By adding product videos to your WooCommerce store, you can effectively showcase your products in a more detailed and informative way. This can provide your customers with a better understanding of your product’s features and benefits.

This can lead to increased conversion rates because visitors who watch product videos are 73% more likely to make a purchase.

Additionally, showing your products in action through video can help build trust and credibility with potential customers, making them feel more confident about their purchases.

For instance, if you have an online store that sells headphones, then adding a video that demonstrates the sound quality and features of the headset can help you get more conversions.

Headphone WooCommerce product video preview

Furthermore, adding product videos to your WooCommerce galleries can also help increase your website’s SEO rankings because search engines prioritize websites that have multimedia content, including videos. Higher visibility in the search results can lead to more people visiting your store and buying products.

That being said, let’s see how you can easily add product videos to your WooCommerce galleries. You can use the links below to jump to the method you want to use.

Method 1: Add WooCommerce Product Video Using YITH WooCommerce Featured Audio & Video Content (Free & Premium)

For this method, we will be showing you how to add product videos to WooCommerce galleries using a premium plugin. We recommend this method if you want more control over your video display and playback settings.

First, you need to install and activate the YITH WooCommerce Featured Audio & Video Content plugin. For more detailed instructions, please see our beginner’s guide on how to install a WordPress plugin.

With this plugin, you can add a video from YouTube, Vimeo, or your own video from the media library to the WooCommerce gallery.

Note: There is also a free YITH WooCommerce Featured Video plugin. However, it doesn’t allow you to configure most of the video, modal, and gallery settings.

Configure the Plugin’s General Settings

Upon activation, head over to the YITH » Featured Audio & Video Content page from the WordPress admin sidebar.

This will open up the ‘Video Settings’ page. From here, you can start by selecting an aspect ratio for the product video from the dropdown menu.

If you are using the free version, this will be the only setting that will be available to you.

Choose the aspect ratio for the product video

Next, toggle the ‘AutoPlay’ switch to active if you want the video to start playing as soon as the page loads.

You can also toggle the ‘Loop’ switch so that the video will start over as soon as it ends.

Once you have done that, you need to move the slider next to the ‘Volume’ option to adjust the volume of the video. Then, simply toggle on the ‘Stoppable videos’ switch to allow users to pause a video.

Configure the General settings for the video

Next, scroll down to the ‘YouTube Settings’ section and toggle the ‘Show Related’ switch on if you want to recommend other YouTube videos from the same channel as your video. This setting is only necessary if you are embedding a product video from YouTube.

After that, you can choose a theme and style for the YouTube video player.

Configure YouTube video settings

Once you have done that, you need to scroll down to the ‘Vimeo Settings’ section and toggle on the ‘Show Video Title’ switch to display the video title in the Vimeo player. You will only need to change this setting if your product videos are hosted on Vimeo.

Additionally, you can select a playback control color for the Vimeo player.

Configure Vimeo Settings

After that, move to the ‘VideoJS Player Style’ section and choose ‘Custom’ as the ‘Style’ option.

This will open up customization settings, where you can configure the background color, slider color, button color, and more of the video player.

Once you are done, click the ‘Save Options’ button to store your settings.

Configure color settings for the video

Configure Modal Settings (Premium Plugin Only)

Now, you need to switch to the ‘Modal Settings’ tab from the top of the page. Keep in mind that this tab won’t be available if you are using the free plugin.

Once you are there, simply toggle the ‘Video in modal’ switch if you want to display the featured video in a modal window. This will show the video within a lightbox in front of the other content on the page.

After you have done that, you can also choose a ‘Modal displaying effect’ from the dropdown.

Configure Modal Settings

Next, click the ‘Save Options’ button to save your changes.

Configure Gallery Settings (Premium Plugin Only)

You now need to switch to the ‘Gallery Settings’ tab from the top. This tab is only available in the premium version.

From here, you have to select the ‘WooCommerce Gallery’ option as the ‘Video and Audio gallery mode’ to display the product videos in the WooCommerce gallery.

Choose the WooCommerce Gallery option

Alternatively, by selecting the ‘Plugin Gallery’ option, the featured video will be shown in a related gallery.

On the other hand, you can also toggle the ‘Video and Audio in sidebar’ switch if you want to display the product video in the sidebar instead of the WooCommerce or related gallery.

Once you are done, don’t forget to click the ‘Save Options’ button to store your settings.

Show the video in the sidebar

Add the Product Video to the WooCommerce Gallery

It’s now time for you to add the WooCommerce product video to the WooCommerce gallery.

First, you need to visit the Products » All Products page from the WordPress admin sidebar. Once you are there, simply click the ‘Edit’ link under a product name to open up the ‘Edit Product’ page.

Click the Edit link under the products page

Next, scroll down to the ‘Product Data’ section and click on the ‘Video’ tab from the left column.

Now, you need to select how you want to add the video from the ‘Add Video’ dropdown menu. For this tutorial, we will be choosing the ‘By URL’ option because we will be adding a YouTube video URL.

Switch to the Video tab and choose By URL option from the dropdown menu

Alternatively, you can upload a video using the WordPress media library. However, we don’t recommend this method because uploading videos uses a lot of bandwidth.

For more details, you may want to see our beginner’s guide on why you should never upload a video to WordPress.

You will then be asked to type a name for the product video into the ‘Video Name’ box.

Once you have done that, simply paste the YouTube video URL into the ‘Video URL’ box and click the ‘Add Video’ button.

Paste YouTube video URL

Finally, click on the ‘Update’ or ‘Publish’ button at the top to save your changes.

You can now visit your online store to check if the video has been added to the WooCommerce gallery of your product.

This is how the product video looked on our demo website.

Preview for WooCommerce product video

Method 2: Add WooCommerce Product Videos Using Really Simple Featured Video (Free)

If you are looking for a free and simple way to add WooCommerce product videos, then this method is for you.

First, you need to install and activate the Really Simple Featured Video plugin. For more details, see our tutorial on how to install a WordPress plugin.

Configure the Plugin’s Settings

Upon activation, head over to the Settings » Really Simple Featured Video page from the WordPress admin sidebar.

From here, toggle the ‘Products’ switch to enable video support for WooCommerce. After that, simply click the ‘Save Changes’ button to store your settings.

Toggle the Products switch

Next, you need to switch to the ‘Controls’ tab from the top. Here you can configure settings for self-hosted and embedded videos.

Now, just move to the ‘Self-hosted videos’ section and start by toggling the ‘Controls’ switch to add controls to the video player.

After that, you can also toggle the ‘Loop’ switch to keep playing the video on a loop. Additionally, you can also mute the video by default by toggling the switch next to ‘Mute sound’.

Once you have done that, simply toggle on the ‘Autoplay’ switch if you want the video to start playing automatically.

Toggle the controls switch

Next, scroll down to the ‘Embed videos’ section, where you will find all these options repeated for embedded video.

Simply configure these settings to your liking and click the ‘Save Changes’ button to store your settings.

Add the Product Video to the WooCommerce Gallery

To add a product video to the WooCommerce gallery, head over to the Products » All Products page from the admin sidebar.

From here, go ahead and click the ‘Edit’ link under a product name to open it.

Edit the products page

Once you are there, you need to scroll down to the ‘Featured Video’ section in the left column and select a video source.

If you want to upload a video from your computer or media library, then you need to select the ‘Self’ option. However, to embed a video from YouTube or some other platform, you will have to choose the ‘Embed’ option.

Note: We don’t recommend uploading videos on your website because they use a lot of bandwidth. For more details, you may want to read our guide on why you should never upload a video in WordPress.

For this tutorial, we will be choosing the ‘Embed’ option because we want to add a YouTube video.

Choose the Embed option and paste the video URL

Upon selecting that option, a ‘Video URL goes here’ field will be displayed. Simply add the YouTube, Vimeo, or Dailymotion video link into the field.

Finally, click the ‘Update’ or ‘Publish’ button at the top to save your changes.

Now you can visit your website to check out the WooCommerce product video.

headphones preview

We hope this article helped you learn how to add WooCommerce product videos to your product galleries. You may also want to see our tutorial on how to schedule coupons in WooCommerce and our top picks for the best WooCommerce plugins to grow your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Product Videos to Your WooCommerce Galleries first appeared on WPBeginner.


May 16, 2023 at 06:00PM