Are you looking to enhance the functionality and design of your WooCommerce store? Look no further than the power of Elementor and the MC WooCommerce Wishlist plugin. In this guide, I’m going to show you exactly how to integrate these two tools to create a seamless and visually appealing Elementor wishlist.
By the end of this guide, you’ll be a pro at integrating Elementor and MC Wishlist, and your shop page will be better than ever before. So, let’s dive in and start boosting your sales today!
Integrating MC WooCommerce Wishlist with Elementor #
MC wishlist and Elementor are compatible with each other. It means you don’t need to dedicate so much time on settings and different options to match them. You will see how shortcodes can make the process easy for you.
Creating a new page or post in Elementor
- From the WordPress dashboard, select the “Pages” tab.
- Click on “Add new”.
- Click “Edit with Elementor” on the page that opens.
Adding the wishlist shortcode to the page or post
- On the page we created or on any page you want, enter the Elementor editor.
- Add the shortcode block to your page using drag and drop.
- Now in the “Content” section, you can put the “Add to wishlist” button , wishlist counter , or wishlist page shortcode.
Access Elementor WooCommerce Wishlist Without Drop Down Menu
You have two ways to turn off the drop down in Elementor.
A) Using MC wishlist settings
- Go to MC wishlist “counter” settings.
- Turn off the “Show Drop Down with Mini Wishlist”.
B) Using Elementor
- On the page we created or on any page you want, enter the Elementor editor.
- Add wishlist counter button to the page.
- To disable the drop down, just enter the Content tab and select the Mini wishlist Settings section and disable the Show products option in this section.
Customizing the appearance and behavior of the Elementor wishlist
To edit our wishlist or add to wishlist button, we have three different sections, which include
- Add to wishlist button
- Counter button
- Wishlist viewing page
Elementor Wishlist Button
First, add the button element to the page through the Elementor menu.
A. Content Settings: In the wishlist button settings, move to the content section.
- Button type: For this section, you have three modes
- “icon only”
- “text only”
- “icon and text”
- Button icon: You can change the Elementor wishlist button icon from this section.
- Separate text and icon: This option is shown in “icon and text” mode, and by activating it, a vertical line is placed between the icon and the text.
- Tooltip and button text: In this section, you can change the text of the button or tooltip. This section contains 4 fields related to displaying the button text in different modes:
- “Add To Wishlist”
- “View My Wishlist”
- “Remove From Wishlist”
- “Already In Wishlist”
B. Style settings: By clicking on “Style” at the top of the page, you will be directed to the style settings section. In this section, you can set the following items.
- Typography of the text: Settings related to the font, such as font type, font size, spacing between characters, etc.
- Icon font size: To change the Elementor wishlist icon font size.
- Text color: To set the text color inside the Elementor wishlist button.
- Icon color: To set the icon color inside the Elementor wishlist button.
- Border color: To set the border color of the Elementor wishlist button.
- Background color: To set the background color of the Elementor wishlist button.
- Border type: To set the Border type and its related settings.
- Button height: To change the height of the Elementor wishlist button.
- Button Margin: To set the margin from the Elementor wishlist button.
C. Advanced settings: By clicking on “Advanced” at the top of the page, you will be directed to the advanced settings section. In this section, you can set the following items.
- Layout: Generally set button spacing settings such as padding and margin, element position on the page, element Z index, and you can also add your own CSS classes in this section.
- Motion effect: Make settings related to the animation of the element, which includes settings for scrolling animations and mouse.
- Transform: Move the element relative to the coordinate axis. For example, you can rotate the button by degrees or set the skew and scale settings.
- Background: Professionally change the background. You can upload an image, set a gradient or specify a color for the background.
- Border: This section is actually the same settings related to Border that we reviewed in style.
- Mask: Allows you to add a mask to any element. Create stylish layouts for any element you want, such as images, videos, Google Maps, etc., using predefined shapes.
- Responsive: Allows you to choose which devices your element will be displayed on.
- Attributes: Add new features for the desired element.
- Custom CSS: Add your own CSS to the button in this section and customize the style.
Elementor Wishlist Counter
First, add the counter element to the page through the Elementor menu.
A. Content settings: Go to the page to the content settings section, this section has two settings related to the counter button and settings related to the mini wish list, all the options of these two sections include the following items.
- Show Icon: This section allows you to remove the icon from the Elementor wishlist counter.
- Counter icon: From this section, you can change the Elementor wishlist counter icon or upload your own icon.
- Counter text display: In this section, you choose whether your Elementor wishlist counter is just an icon or an icon with text
- Add link for “Wishlist counter” title: By enabling this option, when you click on the counter button, you will be redirected to the wishlist page (or the page you linked the button to).
- Counter text: In this section, you can change the text of the Elementor wishlist counter button.
- Display counter: By activating this option, the number of products you have added to the wishlist will be displayed.
- Hide zero number: By activating this option, only positive numbers will be displayed on the Elementor wishlist counter.
- Number position in the counter: This section allows you to change the number display location.
- Display button: In the mini wishlist, there is a “visit my wishlist” button, which will be removed by deactivating this option.
- Wishlist button position: This section allows you to choose the location of the “visit my wishlist” button, which is before the products or after the products.
- Button text: You can change the text of the “visit my wishlist” button from the section.
- Display total: By activating this option, the total of products in the wishlist will be displayed at the bottom of the mini wishlist.
- “Total Product” text: In this section, you can change the text of the section that displays the number of products in the mini wishlist.
- Product per page: You can specify how many products the user has added to the wishlist to be displayed in the mini wishlist.
- Show message if no products: By activating this option when hovering over the counter, if the number is zero, a text indicating that the wishlist is empty will be shown to the user.
- Show products in the dropdown: By disabling this section, the dropdown is always open and does not close.
- Show product list on hover: By disabling this option, the list will not be displayed on the mini wishlist counter.
B. Style settings: By clicking on “Style” at the top of the page, you will be directed to the style settings section. In this section, you can set the following items.
- Text Typography: Settings related to the font, such as font type, font size, spacing between characters, etc.
- Icon font size: To change the icon font size, use the Elementor wishlist counter button
- Text color: You can set the color of the text inside the Elementor wishlist counter button.
- Icon color: You can set the color of the icon inside the Elementor wishlist counter button.
- Counter background color: You can set the Elementor wishlist counter background color (number part).
- Number color: In this section, you can specify the color of the number inside the Elementor wishlist counter.
- Mini wishlist product list: Here you can change the settings like title typography and the mini wishlist title and background color. Since all the fields are almost repeated, we will pass them.
- Mini wishlist button: Set the color, font, background, and border of the “view my wishlist” button.
C. Advanced settings: The settings are similar to the wishlist button element.
Elementor Wishlist
First, add the counter element to the page through the Elementor menu.
A. Content settings: Go to the page to the content settings section.
- Product per page: You can specify how many products to display on each page.
- Items show: By adding the name of the item to this section, the item you want will be displayed on the Elementor wishlist page. To add an item, just click on the “+” icon and select the desired item.
- Selecting the view mode: Choose to display the products on the Elementor wishlist page as a list or grid.
- Grid:
- List:
- Grid:
- Default wishlist theme: The default style of the will be loaded according to your theme for the Elementor wishlist page.
- All together actions button: The user can use this button to perform operations such as deletion operations on several products at the same time.
- “Add All to Cart” button: The user can add all the products in the wishlist to the cart with one click.
- Share wishlist: The user can share the wishlist.
- Login notice: A message about login or registration will be displayed for users who are not logged in.
- Active share buttons: You can choose in which platforms the wishlist can be shared.
- Sharing Title: Allows you to set a text for sharing wishlist.
B. Style settings: By clicking on “Style” at the top of the page, you will be directed to the style settings section. In this section, you can set the following items.
- Footer Button: From this section you can change the style (text color and font, background color, border, border color) of the buttons in the wishlist. (If you give a separate style for other buttons, the style of this section is applied only for “Add all to cart” and “Apply”)
- Select: By activating this section, you can set the custom style (text color and font, background color, border, border color) of the “Action” button.
- Add to cart button: By deactivating this section, you can set the custom “Add to cart” style (text color and font, background color, border, border color).
- Qty input: By disabling this section, you can set the custom style (text color and font, background color, border, border color) of the number field.
- Pagination: By disabling the default mode of this section, you can set your personal style (text color and font, background color, border, border color and padding) for pagination.
- Items: From this section, you can change the font and color of various items (except the button).
- Share: This section allows you to change the color of the social media icons located at the bottom of the screen.
C. Advanced settings: The settings are similar to the Elementor wishlist button element.
Testing the Elementor wishlist integration #
Let’s try some actions on Elementor to check their compatibility with the MC wishlist.
Previewing the page or post
As we can see in the image below, the page we created and put the Elementor wishlist button in it is displayed correctly.
Adding products to the wishlist
As we can see in the image below, the page we created and placed the wishlist button on works correctly. After clicking the Add to wishlist button,
- Button changes to the Remove from wishlist button,
- The counter number increases, and
- The product is added to the wishlist.
Summary #
As you saw, MC Wishlist and Elementor show full integration with each other. The most important feature that MC Wishlist offers is the free Elementor widget. The MC wishlist Elementor widget facilitates the addition of shortcodes in WordPress to create Elementor WooCommerce wishlist.
In this guide, we walked through the process of creating Elementor wishlist. The process is very easy and clear. You can use the free widget that comes with the MC plugin or add shortcodes in Elementor. Both ways, the outcome would be the same.
I hope this guide was helpful for you. If you have any questions on the topic, don’t bother to ask.
