This year, for the first time, we have a dedicated page for Black Friday 2023, listing all deals from Artbees and our partners. We believe these offers will bring invaluable value to the Artbees community and its users.

Get ready to upgrade your digital toolkit and supercharge your business for 2024 with an exclusive 50% discount on all our exceptional products: Jupiter X, Sellkit, WPDone, and Growmatik.

Let’s dive into the details of our Black Friday offers and how you can make the most of this remarkable opportunity.

The world-renowned Jupiter X is now only $30!

Jupiter X, our world-renowned WordPress website builder, empowers you to build beautiful websites for different verticals with the most intuitive tools and customizable options. The leader in the WordPress themes market is on its first and last discount sale this black friday!

Take advantage of the 50% lifetime discount to access an extensive collection of 400+ pre-designed templates, powerful customization options, and many advanced features that will create engaging websites that outperform the competition.

Discount: 50% OFF ($30) Lifetime
Duration: November 20 – November 29

SellKit superpowers to boost WooCommerce at a 50% discount

With SellKit’s WooCommerce superpowers, you can optimize your store, boost engagement, and drive sales. With an arsenal of advanced tools such as advanced checkout builder, smart sales funnels, dynamic discounts, personalized coupons, checkout notices, and more you can secure the highest engagement and conversion for your WooCommerce store.

This Black Friday, don’t miss out on this chance to supercharge your e-commerce marketing efforts at a discounted rate for a limited time only. You can get an incredible 50% discount on SellKit’s Pro and Agency plans. 

Discount: 50% OFF on Pro and Agency Plans
Duration: November 1 – November 25, 2023 (Extended! Check the website)
How to Redeem: Use the coupon code BlackFriday2023

WPDone: Your client WordPress websites at half the cost!

Our professional team of WordPress experts at WPDone helps WordPress developers, designers, and agencies of all types to handle everything WordPress! From custom development to design, optimization, security, and maintenance.

This Black Friday, you can secure expert assistance for your WordPress projects of all types at a whopping 50% discounted rate. This means getting a client website designed or coded or optimized for speed at a way lower cost and increasing your profit margin.

Discount: 50% OFF all project types
Duration: November 1 – November 25, 2023 (Extended! Check the website)
How to redeem: Please note that opening a project during the campaign timeframe does not automatically make you eligible for the discount. You must place an order before the campaign deadline and apply the coupon code “BlackFriday23” to avail the discount.

The only AI-based marketing automation tool for WP is 50% Off

Growmatik, our cutting-edge marketing automation platform, is designed to take your marketing to new heights with the power of AI. With advanced targeting and segmentation, personalized marketing content, and more, Growmatik will revolutionize how you deal with regular marketing challenges such as effective promo campaigns, lead generation, customer retention, and more once and for all.

We are happy to offer Growmatik at a 50% discount on Pro and Elite Plans this Black Friday. This is a great opportunity to secure using Growmatik and all the amazing features coming in 2024 at a way lower price.

Discount: 50% OFF Pro and Elite plans
Duration: November 1 – November 25, 2023 (Extended! Check the website)
How to Redeem: Subscribe to a Pro and Elite plan between November 1st and November 25th to avail the discount.
There is a 2-week trial period which can be skipped by clicking on ‘Upgrade’ in the billing settings.

What about deals from our partners?

Feel free to browse lower in the black Friday page and check out the amazing offers on some of the most popular WordPress products and services out there. If you believe a deal is missing or you’d like to add your own Black Friday offer to the list, feel free to submit it from the ‘Add your deal’ section lower in the list.

Make sure to take advantage of these incredible Black Friday offers!

Remember, time is ticking, so mark your calendars and hurry to take advantage of these incredible BlackFriday offers as the relevant deadlines might be final and without an extension.

A good registration and login section is also important from the marketing viewpoint as it enables the store owner to see the purchase history and target the customers with relevant marketing campaigns based on their purchased items or categories.

In this blog post, we’ll walk you through the steps involved in building a user-friendly and secure sign-up and login for your WordPress or WooCommerce website from sign-up to the user’s My Account dashboard.

In this post we will learn about and use the following Jupiter X widgets, many of which are introduced in the newly-released v3:

• Login
• Social Login
• Register
• Password Reset
• My Account
• Opt-in

We will also use the Layout builder to create different layouts for logged-in and logged-out stages as well as dynamic tags to populate the content with users’ personal details across different steps.

Step 1: Set up a lead magnet in your website (optional)

This step is optional based on your website’s business model and user funnel. If your website is a regular WooCommerce store, the user funnel begins directly with a signup page or a sign-up form during the checkout (in which case you can skip this step)

But if you are running a lead generation landing page, the user funnel may begin with an opt-in box in a landing page or as a call to action at the bottom of every page.

How to create an opt-in box in your landing page

In order to use the opt-in widget, make sure the Artbees’ SellKit plugin is installed during the Jupiter X installation; it is free for all Jupiter X users. If it is not installed, you can simply download it from the Deals & Addons section in Jupiter X control panel.

• Drag the opt-in widget from Jupiter X element library into your landing page. It can be added to a permanent section right below the footer in all pages as well.
• Add, order and visually customize the fields, set your submit button caption and appearance using the widget parameters tab on the sidebar. 
• If you want the entries to be sent to your CRM tool, define it in the settings tab
• Define the after-submit 
• Define custom success and failure messages if you want.

Pro tip: You can put the opt-in widget as part of bigger call to action box, save it as a global widget and insert it easily in different pages and sections across your website.

Another way to save time is to put an opt-in widget inside a permanent area above the footer to be visible in all pages: 

• Simply go to WordPress admin > Jupiter X > layout builder > Footer 
• Edit one of the existing footer templates or click on + Add New button to create a new footer and add your Call to Action widget or global widget.
• If you want this layout to be included or excluded from specific parts of your website, you can do so simply using the Edit conditions button below your footer layout in the Layout Builder.

Pro tip: You can always boost the engagement with opt-in boxes with reciprocity bias. Offer gated content, freebies, giveaways and exclusive discounts to increase sign up rate for your opt-in forms and popups.

Step 2: Create and customize a registration page

If your website user funnel does not begin with individual opt-in forms then the user generation funnel begins with the usual register/login page. Let’s create a register page.

• In WordPress Admin > Pages click on + Add New.
• Name the page as Register and click on Edit with Elementor. 
• In the page building environment drag the Sign Up widget to your canvas
• You can stick to the usual fields in a registration form or add, reorder and customize the fields as applies. 

It is important to put a link to your registration page in a highly visible and preferably permanent spot in your website, for example the upper right corner in your header.

Step 3: Create and customize a WooCommerce login page

The WooCommerce login page is basically the My Account page appearing different for non-logged-in users. 

Firstly, check WordPress Admin > WooCommerce > Settings > Advanced to make sure the right page is set as My Account page. 

If your website happens to not have a My Account page, you should create one and select it in this menu.

• In WordPress Admin > Jupiter X > Layout Builder > Single and click on + Add New. 
• Give your page the name like ‘My Account login page’ and click on the Create button. 
• You will now be taken to the page building environment where you should create the content for your login page. 
• Drag and drop the login widget from the widget library to the canvas. 
• You can stick to the usual fields in the sign up form or add, reorder and customize them as you wish.

• Click on the Publish button and back on the Layout Builder in Jupiter X control panel and click on the Edit Conditions button for the page you just created.
• From the upcoming dialogue, add this condition: Include > WooCommerce > My Account Login Page.
• Click on the Save & Close button.

Step 4: Create and customize a password reset page

Every login form should also have an option to recover forgotten passwords. In order to create a password reset for your WooCommerce store:

• Open the Password Reset from WordPress Admin > Pages or simply create a new one 
• Drag the Reset Password widget into the canvas
• Customize the fields, appearance and success message 
• Click on Publish or Update button

You should then connect your sign in form to the password reset page. 

• From WordPress Admin > Pages find and open the ‘password reset’ page or simply create a new one and title it as ‘password reset’
• In the page building environment, drag the Reset Password widget into the canvas
• Customize the fields, appearance and success message 
• Click on Publish

Now you need to include a link in your login page to the password reset page. 

• From the Layout Builder simply find and edit the ‘My Account login page’
• In the editing environment click on the Login form widget and paste the reset password page link in the form setting sections.

Step 5: Create and customize a My Account page 

My Account is the page your users will see when they log in to their account. Using the My Account widget in Jupiter X you can customize the content of this page to your preferences.

• In WordPress Admin > Jupiter X > Layout Builder > Single and click on + Add New. 
• Give your page the name like ‘My Account’ and click on the Create button. 
• You will now be taken to the page building environment where you should create the content for My Account page. 
• Drag and drop the My Account widget from the widget library to the canvas. 
• You can stick to the usual tabs in the dashboard (Dashboard, Orders, Download, Addresses, Account Details, Logout) or add, reorder and customize them as you wish.
• By clicking on each tab you will see the range of options to customize that tab in the sidebar. You can even choose to use a completely custom content for a tab if you wish.

• Click on the Publish button and back on the Layout Builder in Jupiter X control panel and click on the Edit Conditions button for the page you just created.
• From the upcoming dialogue, add this condition: Include > WooCommerce > My Account 

Step 6: Create and assign exclusive content for different user roles

In addition to the My Account page, there are many other ways you can serve exclusive content for your logged-in users. From different-looking homepages to exclusive products and blog posts, custom post types and more. 

In WordPress Admin > Jupiter X > Layout Builder, you can create different layouts for header, footer, single or archive pages and in the Conditions section choose the eligible user roles from the User Attributes section.

Let’s create a basic example of a content that should look different for logged-in and logged-out users: the login section in the header.

• In WordPress Admin > Jupiter X > Layout Builder > Header and click on + Add New. 
• Give your page the name like ‘Header for logged-in’ and click on the Create button. 
• You will now be taken to the page building environment where you should create the content for your custom header. 
• Use the Text widget to add a Logout link somewhere in the header (maybe the right hand?) and link it to /wp-login.php?action=logout
• The same way you can also add a link to My Account page next to the Logout link.
• How about adding the display name of the logged-in user here too? Simple Add a text and set it to load the display name from dynamic keywords (user info) in the sidebar.

• Save/Publish the page and back in the layout builder, use the Edit Conditions section to Include > User Attributes > All Logged-in Users.
• Also make sure to set the condition for your regular header to not appear for the logged-in users using Exclude > User Attributes > Not Logged-in Users.

Now your logged-in users will see a header containing relevant links based on their login status. 

Best practices to follow for WooCommerce Login

Unify page for WooCommerce login and sign up

For ease of use it’s great to put both registration and login forms inside one page. In this case the My Account page will include both registration and login forms. 

Use social login for easier registration and login

Social login enables a single sign-on using existing information from a social services such as Google, Facebook and Twitter to sign into a website instead of creating an independent login specifically for that website. 

Social login also removes the need for signing up via a form as that information will be fetched by the website owner from the social website. For example, the registrant’s name, surname and Email address.

Social login has become a widely popular sign in method in credible websites for a faster signup and login experience and a big advantage for Ecommerce websites as it removes the checkout friction and streamlines the conversion process.

In order to add social login to your registration and login page, simply drag the social login widget to your My Account page.

Please note before using the social login widget, you should set your API keys in Jupiter X settings. This API key is obtained from the third-party social service that you want to use.

Allow signing up with a checkbox

Social login is good for a fast user account creation and login. But there is even a better way to minimize the friction for an impatient user. 

For the new arrivals who are in a hurry or simply impatient, we can minimize the friction even further by entirely removing the need for a registration and only offer them a checkbox to create an account for them. 

Instead of completing a long sign-up form during checkout, let customers sign up with just a checkbox and proceed with the rest of the checkout. The password will be sent to their email! 

In order to add this feature to you WooCommerce store, make sure SellKit is installed in your WooCommerce website and On WooCommerce Settings > Accounts & Privacy, make sure the “Allow customers to create an account during checkout” is checked, and then you will see the checkbox on your Checkout Form.

Wrapping up

In this post I explained how to create a standard WooCommerce login from the opt-in step to my account page. However, if you are planning to create a website for a membership business, an online course provider or any type of subscription-based website, you may need to consider more details and use other tools as well.

Here is where the Jupiter X Role Manager comes to the rescue. Using this feature, you can easily restrict access and fine-tune user permissions, giving you greater control over the design and functionality of your WordPress websites.

Let’s explore how to use the new Jupiter X3 Role Manager to manage roles and permissions and why it’s an essential tool for all designers and developers out there.

Why do we need user roles in WordPress?

WordPress user roles  were created in response to common concerns among website designers and developers regarding the following topics:

• Security: Users should only have access to areas where they need to perform their tasks. Sensitive settings should not be available to all users.
• User management: Adding, removing, and modifying users should only be done by certain users.
• Content management: Only trusted or trained users should be allowed to create and publish content. This helps ensure that any published content meets the expected quality.
• Compliance: Access to certain areas of the website should be limited to ensure compliance with legal and regulatory requirements. Only authorized users should have access to sensitive information.

What are the available User Roles in WordPress?

WordPress introduced user roles to empower website owners with the ability to maintain control over their sites and limit access for others, providing a safeguard against the concerns mentioned above. WordPress offers six default roles as part of its standard package, and you can see the full list of their capabilities from the WordPress Codex. Here is a short overview of them:

• Super Admin: Someone who has access to all features, including administration of site networks in multisite.
• Administrator: Somebody who has access to all the administration features within a single site, including the ability to manage site settings and install plugins, etc.
• Editor: Somebody who can publish and manage posts, pages, and other types of content, as well as moderate comments and manage categories and tags.
• Author: Somebody who can create and manage their own posts and pages, as well as upload media files.
• Contributor: Somebody who can create and manage their own posts and pages, but their content requires review and approval by an Editor or Administrator before it can be published.
• Subscriber: Someone who is only allowed to manage their profile.

When WordPress is installed, a user account with Administrator access is created by default.

How to apply and edit default WordPress User Roles?

To apply a user role to a new user, follow these steps:

1. Go to your WordPress dashboard and click on Users > Add New in the left sidebar.

2. Enter the user’s information into the related fields. Note that the username and email fields are required, and the password is auto-generated, although you can change it.

 3. Click on the Role drop-down menu and select the role you want to apply to this user.

4. Click on the Add New User button at the bottom of the page.

Although there are some plugins such as User Role Editor, Advanced Access Manager, Members, and WPFront User Role Editor that allow you to edit roles, they are mostly limited to default WordPress functions and do not separate design from content.

Jupiter X3 tackles this common concern: how to have a user-centric and easily maintainable website where designers and clients collaborate effectively to create engaging webpages.

Improving WordPress user Roles with Jupiter X

With Jupiter X Role Manager, you have the ability to easily restrict or grant access to the editor for any desired role.

If you have already used a plugin to modify the functionality of each role, you can continue to use those customized roles and/or grant or revoke access to edit the content of each role.

To enable managing user roles, follow these steps:

1. From the WordPress dashboard, click on Jupiter X > Settings.

2. Go to the Elementor tab and make sure Role Manager is selected from the Elementor Extra Features section.

3. Click on the Save Settings button

Now navigate to Elementor > Role Manager from your WordPress dashboard.

Here you can see all the roles, and by clicking on each drop-down menu, you will see two checkboxes:

• No access to editor
• Access to edit content only

By selecting the first checkbox, “No access to editor,” that specific role will be completely restricted from accessing the “Edit with Elementor” button. Selecting the second checkbox, “Access to edit content only,” will enable users of that specific role to open the editor and access only the content on that page, including text and images. Those users won’t be able to reposition columns, add or remove any widgets, or make any changes that can alter the design of the page.

It is important to know that you can use the role manager with a one-off Jupiter X license and without need for an Elementor Pro subscription.

The second checkbox is only available for Jupiter X3 users.

Best practices for assigning roles to different user types

Let’s explore key aspects of effectively managing user roles and permissions for different user types to streamline design collaboration and ensure a secure and efficient workflow within your WordPress projects.

How to grant unrestricted access to a user?

If both checkboxes remain unchecked for a role, it indicates that they will have unrestricted access to edit the content and design of the page. Carefully review the permissions assigned to each role and click “Save Changes” once you have made the necessary adjustments.

What user roles to grant to client users?

If you are designing a website for a client, most of the time they will require Administrator access. In this scenario, assign the Editor role to them and select “Access to edit content only” for this role, so they won’t mess up with the design. These permissions can be discussed and customized according to specific needs in advance.

What user roles to grant to client-related users?

It is recommended to set “No access to editor” for roles below the Editor level. By doing so, contributors and authors brought on by the client will be unable to make any edits to the site’s content. It is also better to discuss and customize the roles according to the specific needs of your client or site owner.

Conclusion

Having a Role Manager is an essential tool for anyone who wants to separate content from design for their projects. Jupiter X3 Role Manager empowers designers and developers to effectively manage WordPress user roles and permissions, offering greater control, enhanced security, and improved collaboration on WordPress projects. 

Jupiter X Role Manager allows for seamless management of roles, providing the ability to restrict or grant access to the Elementor editor based on specific roles. This feature effectively separates design from content, ensuring that clients and team members have appropriate access while preserving the overall website design.

Videos have the power to captivate and connect with your audience in ways that text or images simply cannot. They can convey your message with emotion, demonstrate product functionality, or showcase your brand’s personality. However, selecting the right tool to embed videos seamlessly into your WordPress site can be a daunting task. 

In this blog post, we will delve into the myriad benefits of using Jupiter X’s Advanced Video widget to embed videos in WordPress for a truly immersive and engaging web experience.

What are the benefits of the video content?

Incorporating video content into your website offers a range of benefits that contribute to increased user engagement by delivering information effectively and a more enriching user experience.

Increase user engagement and experience

Videos have a unique ability to capture attention and engage users. By embedding compelling video content, you can attract visitors, keep them on your site for longer durations, and reduce bounce rates. Engaged users are more likely to explore your website further and interact with your brand.

Comprehensive viewing experience for visitors

Videos provide a powerful medium for storytelling. They allow you to convey your message, share narratives, and evoke emotions more effectively and quickly than plain text. By visually showcasing your products, services, or brand values, you can create a deeper connection with your audience, fostering trust and loyalty.

What factors to consider when choosing a video embedding tool

When selecting a video embedding tool for your website, there are several factors to consider ensuring you make the right choice. Some of the most important ones are as follows:

Customization options

Customization options are crucial for ensuring that the video player aligns with your website’s branding and design. Look for embedding tools that offer a range of customization options such as:

Have control over video controls and covers

The Advanced Video widget provides you with control over video controls and covers, giving you the ability to customize the behavior and appearance of these elements within your video player. You can choose whether to add or remove video controls such as the play button, progress bar, current time, full screen, rewind, and fast forward, and also modify the thumbnail as your video cover as you wish.

Choose from predefined skins

The Advanced Video widget offers the flexibility to choose from 3 predefined skins for your video player. These predefined skins are pre-designed visual styles that provide different appearances and layouts for your video display. The availability of these predefined skins gives you the opportunity to choose a style that best aligns with your website’s overall design, branding, and visual preferences.

Ability to present videos in device mockups

This feature, which is offered by the Jupiter X Advanced Video widget, allows you to showcase your videos within the context of various devices, such as laptops or desktop computers. By utilizing device mockups, you can add a touch of realism and enhance the visual appeal of your video displays.

Remove YouTube or Vimeo branding

The ability to remove YouTube or Vimeo branding is an important customization option provided by the Jupiter X Advanced Video widget. By removing the branding of these video hosting platforms, you can maintain a seamless and cohesive visual experience on your website, without any external branding elements interfering with your own brand identity.

What is Jupiter X Advanced Video widget

The new Advanced Video widget in Jupiter X v3, offers a variety of powerful features that enhance the video embedding experience. With its drag-and-drop functionality, you can easily add and position videos within your website’s layout. Pre-designed templates provide a convenient starting point for video displays, saving you time and effort. Additional features like sticky videos, looping, muting, and autoplay options give you greater control over how and where the videos are presented and played. These features enhance the overall user experience and allow you to create engaging and interactive video content.

Price

Consider the pricing model of the video embedding tool. Opting for a one-time fee for the tool is often more cost-effective than subscribing to a service with recurring charges. The Advanced Video widget comes with a one-time fee you pay for the Jupiter X theme, so you won’t have to pay for any extra subscription to embed videos in your website.

How to add a video using Jupiter X Advanced Video widget

Just like with any other widget, you first need to make sure Advanced Video is installed for the Elementor page builder. Go to Jupiter X > Settings > Elementor and check if the Advanced Video feature is checked off in the list.

Now navigate to the page or post where you want to add the video. When you access the content editor, locate Advanced Video in the Elements section and drag it to your page.

Once you’ve added the Advanced Video widget, you will see a settings area where you can customize the video display.

Choose the video source. The Advanced Video widget supports various sources, including YouTube, Vimeo, and self-hosted videos. Select the appropriate option based on where your video is hosted. Enter the video URL if it’s hosted on YouTube or Vimeo or simply upload your video if it’s self-hosted and start customizing the video player appearance to your liking using the customization options mentioned above.

Let’s wrap it up!

By now you might be sure that incorporating engaging video content into your website can significantly enhance user engagement, create a more immersive experience, and effectively convey your message to your audience. With the Jupiter X Advanced Video widget, you have access to a powerful tool that offers customization options and versatile features for seamless video embedding in WordPress. And let’s not forget that it comes for a one-time fee which would positively impact your budget and long-term needs.

Please share your thoughts and experiences with video content in the comments below. How has it impacted your website’s engagement and user experience? Have you tried the Jupiter X Advanced widget? Did it make your video embedding process any easier? We’d love to hear from you!

In this tutorial, I am going to show you how to apply your WooCommerce coupons for a variety of conditions using code snippets.

This tutorial works with the Jupiter X or any other theme you are using for your website. In the following examples, we will be using the JupiterX theme.

Check if coupons are already applied

When applying a coupon using code, we should check that the coupon is not applied already.

To achieve this, we just need to use the following WooCommerce native function:

$coupon_code = 'couponToApply';


if ( ! WC()->cart->has_discount( $coupon_code ) ) {
    // rest of code
}

As you can see, here we’ve created a WooCommerce coupon from the dashboard with the coupon code “couponToApply”.

In the code snippet we are using the has_discount function to check if this coupon has already been applied or not. If it has not been applied, we will apply it using following method:

$coupon_code = 'couponToApply';


if ( ! WC()->cart->has_discount( $coupon_code ) ) {
    // rest of code
    WC()->cart->apply_coupon( $coupon_code );
}

We can apply any WooCommerce coupons using the apply_coupon function.

In order to use this snippet correct, we should attach it to the proper WooCommerce hook. 

The best way to test or use this snippet is to add it to your theme’s functions.php file.

Apply WooCommerce coupons without conditions

Of course, when applying a coupon there will always be at least one condition: The coupon should not be applied already.

add_action( 'woocommerce_before_cart', 'apply_woocommerce_coupon' );


function apply_woocommerce_coupon() {
    $coupon_code = 'couponToApply';


    if ( ! WC()->cart->has_discount( $coupon_code ) ) {
        // rest of code
        WC()->cart->apply_coupon( $coupon_code );
    }
}

The above hook (‘woocommerce_before_cart’’) is the best way to apply our coupons using code snippets because it is applied before our clients see the cart content, meaning that it will be viewable via the cart page.

After adding this snippet to our theme, we can add some products to our cart, and this will be the result:

Apply WooCommerce coupons on the checkout page

We can apply coupons on both the cart and checkout pages.

For now, let’s apply coupons on the checkout page. We need to expand conditions a little more to achieve this, as you can see in the following snippet:

add_action( 'woocommerce_before_cart', 'apply_woocommerce_coupon' );


function apply_woocommerce_coupon() {
    $coupon_code = 'couponToApply';


    if ( ! is_checkout() ) {
        return;
    }


    if ( ! WC()->cart->has_discount( $coupon_code ) ) {
       return;
    }


    WC()->cart->apply_coupon( $coupon_code );
}

Here we have added another condition that cancels the process if it is not the checkout page.

Apply coupons if a specific product is added to the cart

Sometimes you need to apply WooCommerce coupons if certain products are added to the cart and remove those coupons if those products are removed from the cart.

Let’s do this with the following snippet:

add_action( 'woocommerce_before_cart', 'apply_woocommerce_coupon' );


function apply_woocommerce_coupon() {
    $coupon_code = 'couponToApply';


    // Apply coupon if the product with this id is added to cart
    $product_id = 25;


    // Products that are added to cart.
    $products = WC()->cart->get_cart();


    if ( in_array( $product_id, array_column( $products, 'product_id' ), true ) ) {
        WC()->cart->apply_coupon( $coupon_code );
    } else {
        // Remove coupon if user has removed this product from cart.
        WC()->cart->remove_coupon( $coupon_code );
        WC()->cart->calculate_totals();
    }
}

Apply WooCommerce coupons based on the number of products in the cart 

Sometimes you need to apply coupons when a certain number of products have been added to the cart.
You can achieve this using the following snippet:

add_action( 'woocommerce_before_cart', 'apply_woocommerce_coupon' );


function apply_woocommerce_coupon() {
    $coupon_code = 'couponToApply';


    // Products that are added to cart.
    $products = WC()->cart->get_cart();


    // If more than 2 unique products are added to cart apply coupon else remove it.
    if ( count( $products ) > 2 ) {
        WC()->cart->apply_coupon( $coupon_code );
    } else {
        // Remove coupon if user has removed this product from cart.
        WC()->cart->remove_coupon( $coupon_code );
        WC()->cart->calculate_totals();
    }
}

If more than two unique products are added to the cart, the coupon will be applied. If the user removes products and the number of unique products in the cart falls below two2, the coupon will be removed.

Apply coupons based on cart subtotals

It is a great idea to apply coupons when the cart subtotal is greater than a certain amount:

The following snippet will apply the coupon if the cart subtotal is greater than $20. It will also remove the coupon if the cart subtotal drops below $20.

If you want, you can change the $20 limit and apply any other conditions as desired.

add_action( 'woocommerce_before_cart', 'apply_woocommerce_coupon' );


function apply_woocommerce_coupon() {
    $coupon_code = 'couponToApply';


    // If more than 2 unique products are added to cart apply coupon else remove it.
    if ( 20 < WC()->cart->get_subtotal() ) {
        WC()->cart->apply_coupon( $coupon_code );
    } else {
        // Remove coupon if user has removed this product from cart.
        WC()->cart->remove_coupon( $coupon_code );
        WC()->cart->calculate_totals();
    }
}

Apply coupons for a certain user

We can decide to apply a coupon for a certain user or group of users using the following snippet:

add_action( 'woocommerce_before_cart', 'apply_woocommerce_coupon' );


function apply_woocommerce_coupon() {
    $coupon_code = 'couponToApply';
    $users_id = [ 2 ];


    $current_user = get_current_user_id();
   
    if ( ! in_array( $current_user, $users_id, true ) ) {
        return;
    }


    WC()->cart->apply_coupon( $coupon_code );
   
}

In this example, we defined an array of users. If the current user ID exists in the defined array, the coupon is applied. 

Conclusion

As you can see, you can easily apply WooCommerce coupons programmatically based on a huge variety of conditions. You can also remove coupons if certain conditions are met.

If you are looking for an easier way to apply coupons, try SellKit, one of the best plugins for personalizing WooCommerce promotions on the market, which allows you to automatically apply discounts and coupons to your WooCommerce store pages without writing a single line of code.

• Essential Elements of Blog Layout to Consider
• How to Create Blog Layout with Jupiter X3 Layout Builder
  • Widgets that need to be enabled in Elementor
  • A simple tip for a pixel-perfect and SEO-optimized layout
  • How to create a blog single page
  • How to create blog archive page
• Top 5 Practices for Single Blog Layout Design
• Top 8 Blog Archive Layout Practices to Follow
• Key Takeaways
  

Essential Elements of Blog Layout to Consider

There are certain essential elements that must be considered to ensure a seamless reading experience for your blog audience. Any standard blog can incorporate all or some of the following elements in blog archive or single pages. These elements will not only enhance reader engagement but also provide an appealing and organized visual design.

Each item serves a specific purpose, ranging from contextualizing your content with post meta and dynamic tags to facilitating reader engagement with comments and navigation. 

The above widgets are the constituent elements of a single blog page, and some of them, such as Advanced Posts, Posts, and Posts Carousel, can also be used in the blog grid (blog archive). The image displayed below can help provide a clear understanding of these widgets and their functions within a blog single page.

How to Create Blog Layout with Jupiter X3 Layout Builder

The Jupiter X3 layout builder offers a visual depiction of your entire website, including single and archive pages, allowing for straightforward customization of even the most minute details. This allows you to design custom single layouts, assign them to any post type, or create an archive page layout and apply conditional logic to determine where to display it. Let’s see how it works.

Widgets that need to be enabled in Elementor

Before creating a blog layout, let’s check if all our required widgets can be found in Elementor. To check this, from your WordPress dashboard, navigate to Jupiter X > Settings and choose the Elementor tab. Then, make sure that all items in the Layout Building Blocks are marked. Finally, click on the Save Settings button at the bottom of the page.

By doing this, we ensure that all the required widgets of Jupiter X3 are available when creating a blog layout in Elementor.

A simple tip for a pixel-perfect and SEO-optimized layout

When designing a blog layout using Elementor, it is necessary to optimize the layout for search engines and ensure maximum design flexibility. To achieve this objective, you need to activate the Flexbox Container and Nested Elements features in Elementor first. These features help to group widgets in a container when creating layouts, improve page rendering performance, and bring more flexibility when designing a pixel-perfect page. Note that enabling these features affects the entire website.

To activate them, follow these steps:

1. Go to your WordPress dashboard and navigate to Elementor > Settings > Features.
2. Locate the Flexbox Container and Nested Elements features.
3. Set both features to “Active“.
4. Click on the “Save Changes” button to save your settings.

How to create a blog single page

A blog single page is a web page that displays the content of a post from a blog. It mostly consists of the post’s title, metadata, the main content, and sections such as the author box and comments. Here, we explain how to create a single page template with Jupiter X3.

To get started, follow these steps:

1. Go to your Jupiter X dashboard and select the Layout Builder tab.
2. Choose Single from the left sidebar and click on the + Add New button.
3. Name your layout and click on the Create button.

4. Then, you will be redirected to the Elementor environment.
5. Search for Jupiter from the left-side panel and you will see all the available widgets of Jupiter X3.
6. Drag and drop related post widgets like title, meta, content, author box, comments, etc. into a single container on the right side.
7. Customize the widget settings and design to your liking using the settings panel.
8. Once you have added all the widgets you want to your page, click the Update button to save your changes.

9. Click on the arrow icon next to the Update button and select Display Conditions. 
10. Here, you can assign the created layout to your posts by defining conditional logics and then save it. For example, considering a Singular > Post > All value will assign the layout to all post types.

How to create blog archive page

For the archive page, the same steps as designing a single page layout apply, but with a few changes:

1. You need to select Archive from the Layout Builder tab when creating a new layout.
2. To benefit from a variety of layouts including grid, metro, matrix, column and masonry it is highly recommended to use the Advanced Post widget (these blog layouts will be discussed in the next section).
   
   Note: If you have decided to use the Posts widget instead, it’s important to make sure that the Is Archive Template option is toggled on in the widget’s Content settings.
   
3. To assign your created layout to your archive page, you can use the following conditions together, as shown in the image below:

• Include > Archive > Post Archive (blog) > All
• Include > Archive > In Category > All

In the next section we will cover some of the best practices to follow when designing layout for blog single and blog archive.

Top 5 Practices for Single Blog Layout Design

Blog layouts can strongly enhance the user experience and readability of a blog. These layouts adapt to different types of content and audiences, so it’s imperative to choose one that perfectly suits your blog’s purpose and style.

However, during the blog design process, it’s important to consider various aspects beyond just the layout. For instance, you should simplify the layout by avoiding too many elements and using templates with multiple columns. Or choose colors wisely to create an easy-to-read and cohesive look, and limit your palette to three colors or fewer.

Let’s take a look at a few practices implemented using Jupiter X.

Full screen image hero

This layout sports a fullscreen image hero section followed by nice imagery in the body of the post. The Page Dynamic layout in Jupiter X is a good example of such a layout.

This layout is ideal for a blog single page that prioritizes both images and textual content, such as photo blogs, travel blogs, and lifestyle blogs.

To create the hero section, you can set the Featured Image value for the Dynamic Tags and apply it as a background container. You can also add the post title and post meta to the container with proper padding and left alignment.

Multi-column hero

This layout makes good use of columns in the hero and body to organize content without sacrificing the aesthetic beauty. By using a two-column layout in the body of the article, you can emphasize the key points and spice up your post with a decent visual hierarchy.

This type of layout can be used for topics that do not rely much on imagery, such as diaries, literature, and academic blogs. The Page Builder blog layout in Jupiter X is a good example of this type of layout.

Image gallery

Image gallery layout is also useful for topics involving heavy imagery. As the title suggests, the post single page begins with a big image hero section and centrally-aligned post title and meta info. The hero is followed by one or multiple image galleries in the body of the post.

Check the Image Gallery layout by Jupiter X as an example. You can use this layout for a variety of topics such as beauty magazines, design blogs, and more.

Small but colorful hero

This layout displays the title and post meta in a centered alignment within a container that has a colored background. The featured image is located in a container below, with a negative margin-top value.

This is a standard blog layout (and my favorite!) that can be used for a large variety of blog types. Check the Audio External layout in Jupiter X as an example.

Self hosted video

When your content is all about video, you want it to become the center of your blog too. If you are a videographer, filmmaker, or a vlogger, this is the right style for your blog.

To create the Self Hosted Video blog single layout, you will need to set a video as the background of the top container. To do this, you should add a new field group using the ACF plugin first. You can accomplish this by following these steps:

1. Go to your WordPress dashboard and navigate to ACF > Field Groups > Add New.
2. Enter a Field Group Name, such as Post Hero Video.
3. Select Text as the Field Type.
4. Enter ‘Video URL’ as the Field Label.
5. Enter ‘video_url’ as the Field Name.
6. Select Post as the Post Type.
7. Save your changes.

Next, using the JX layout builder, define a new single layout. Add a container with full width and a minimum height of, for example, 400 px. Then, set the background type to Video and for the video link value, select Dynamic Tags > ACF Field, and set the Settings Key to Video URL.

In the next step, set the display condition as:

Include > Singular > In Post Tag > Video Cover

Note: Before selecting the ‘Video Cover’ tag in this step, you must first add the ‘video cover’ tag.

All you need to do then is to add the video URL (YouTube, Vimeo, or direct MP4 hosted on the same website) from the Post Hero Video section when creating a new post in WordPress and include the ‘video cover’ tag for it.

Top 8 Archive Blog Archive Layout Practices to Follow

The following archive layout practices aim to showcase layouts that can be implemented using the Advanced Posts widget for a variety of content types and target audiences.

Grid

You can design a blog grid structure by choosing the Grid value for the Advanced Posts widget and setting the columns to two to six. This layout organizes your blog posts into a series of equal-sized squares or rectangles, creating a clean and visually appealing design.

Grid layout is ideal for blogs with a large number of posts, as it allows users to quickly scan and find the content they’re interested in. Newspapers, magazines, or news sites are the best use cases of grid layout as it makes long texts easier to read.

To clarify further, imagine you run a blog that covers a variety of scientific fields, such as astrobiology, astronomy, geology, meteorology, and more. With so many diverse topics to cover, it can be challenging to organize your content in a way that is both visually appealing and easy to navigate. This is where a grid layout can be incredibly useful. Here, you can see a preview of the grid layout designed with 4 columns and content under images:

List/Column

A blog list or column is a popular layout that presents blog posts in a single column, stacked vertically. This layout typically arranges posts in chronological order, with the latest post at the top of the list. The simplicity and intuitiveness of the blog list layout make it a great choice for bloggers who want to present a large volume of content in an easy-to-read and organized format.

To create this layout, you will need to use the Advanced Posts widget, set the general layout to Grid with one column, and use the content on the side or under image options. For Content on the side to work, make sure that the featured image size is set to 50% from the Style > Featured Image.

Here are a few examples of how a blog list layout can be used:

• News Websites: News websites often use a blog list layout to display the latest news articles in chronological order.

• Recipe Blogs: These blogs can show a list of recipes in a particular category, such as desserts or appetizers, using the list layout. This makes it easy for users to find the recipe they are looking for without having to navigate through a complicated menu.

• Education Websites: With a blog list layout, these blogs can display a list of upcoming events, news about the school or university, or tips and advice for students. This makes it easy for students to stay up-to-date on the latest information and events.

Metro style

Inspired by the Windows Metro interface, this layout arranges blog posts in a mosaic of tiles with varying sizes. The tiles are arranged in a grid format, with each tile occupying a fixed amount of space. This creates a visually stunning and highly organized layout that is both engaging and easy to navigate. The Metro style layout is highly visual and focuses on showcasing images, making it an ideal choice for websites that rely heavily on visual content. 

Photography and tourism blogs are great examples of sites that can benefit from a Metro style. One of the key features of a Metro style layout is the use of tiles or panels to display each post. Each tile typically includes a featured image, a headline, and maybe a brief excerpt from the post. You can choose the Metro option from the Advanced Posts widget and select to show content overlay or under the images.

The following examples illustrate how the Metro layout can be used in a variety of contexts:

• Fashion Blogs: Blogs about fashion can utilize the Metro style layout to visually showcase outfits. Each tile could include a photo of the outfit, for example.
• Travel Websites: Different destinations can be showcased on travel websites using Metro style layouts. Tiles can contain images of popular tourist destinations, headlines, and brief descriptions of each, facilitating the user’s search for information.
• Photography Blogs: Metro-style layouts are perfect for photography blogs. Users can easily explore the photographer’s work since each tile would feature a different photograph.

Matrix

The Matrix layout shows blog posts in a grid-like format. The name of the blog matrix layout comes from its resemblance to a criteria matrix, which has data selection criteria associated with its columns and rows. In Jupiter X3, the Matrix layout displays one post on the first row, three on the next, and the pattern continues for the following lines.

The Matrix layout is similar to the Metro style as it features an image-centered layout. Similarly, the use cases and examples of Metro style layouts also apply to Matrix layouts, with the main difference being the visual appearance and design.

To use the Matrix layout for the archive page, select Matrix from the Advanced Posts widget. After implementing it and making a few modifications, this is what we got:

Carousel

The carousel blog layout is characterized by a horizontally scrolling display of blog posts, often accompanied by images. This layout style breaks away from traditional linear blog designs, allowing readers to easily navigate through multiple posts in a dynamic and fluid manner.

This layout is excellent for highlighting your most popular or recent content, drawing users in and encouraging them to explore further. By adding the Posts Carousel widget to your archive page template, you can have this layout.

Sidebar

The sidebar layout includes a vertical column alongside your main content area, which can be used to display additional information such as an about section, social media links, or categories. To utilize this layout, you will need to create a container that includes a sidebar and add the Advanced Posts widget to the main area. Then, select the Grid layout with one column for the content. Finally, you may add any widget of your choice to the sidebar.

A well-designed sidebar can help users quickly find what they’re looking for, reducing the need to scroll through long pages or use the back button. This layout can be a valuable addition to a wide range of blog types, helping to enhance user experience and navigation, especially for category-based or personal blogs. Here are a few examples:

• Lifestyle Blogs: Personal lifestyle blogs often cover various aspects of the blogger’s life, such as travel, fashion, food, and wellness. A sidebar layout can help organize these diverse topics and make it easier for readers to find content that resonates with them. For example, a lifestyle blogger could use a sidebar to display categories like “Travel Diaries,” “Fashion Tips,” “Recipes,” and “Wellness Advice.”

• Educational Blogs: Blogs that focus on providing educational content, such as tutorials, guides, or courses, can benefit from sidebar layouts by organizing their content into easily accessible categories. For example, a language learning blog could use a sidebar to display categories like “Grammar Lessons,” “Vocabulary,” and “Listening Exercises.”
• Business Blogs: Business blogs can use sidebar layouts to showcase their products or services, display testimonials, or provide easy access to case studies. For example, a marketing agency’s blog could use a sidebar to display categories such as “SEO Tips,” “Social Media Strategies,” and “Content Marketing Advice,” along with a section for client testimonials.

Grid sidebar

Combining the grid and sidebar layouts, the grid sidebar layout organizes your blog posts in a grid format while also incorporating a sidebar for additional content. It features more than one column, enabling the display of content areas in a structured manner. This layout is particularly useful for websites with a vast array of information, as it allows for better categorization and easier navigation. The grid sidebar layout has similar use cases to a sidebar layout. Currently, we use this template for the Artbees Blog.

Masonry

The Masonry blog layout is a type of blog design that features a grid-based arrangement of posts with varying sizes and proportions. This layout is characterized by its irregular and asymmetrical appearance, which creates an interesting and dynamic visual effect. Unlike traditional blog layouts, where posts are displayed in a linear and uniform manner, the Masonry blog layout allows for more creative and flexible post arrangements that can better showcase visual content like images and videos.

This layout can be used for a variety of blog niches and content types, from fashion and lifestyle to food and travel. However, this layout is particularly well-suited for blogs that feature a lot of visual content, such as photography blogs or portfolio websites.

To apply the Masonry layout, simply drag and drop the Advanced Posts widget to your archive page and set the General Layout to Masonry. You also have the option to use it with different numbers of columns.

Key Takeaways 

In summary, creating the perfect blog layout requires careful consideration of design widgets and proper customizations. By following the tips outlined in this blog post, you can choose a layout that suits you best and implement it to your blog. Here are some key takeaways to keep in mind when creating a blog layout:

• For a better understanding of the widgets and elements available to use for a blog layout, we recommend visiting the JupiterX website.
• Keep your blog layout simple and easy to navigate, with a clear hierarchy of information that guides the reader’s eye.
• While designing your layout in Elementor, ensure that it is optimized for SEO purposes.
• To discover the layout that best illustrates your content and resonates with your audience, we recommend experimenting with various layouts available in Jupiter X3.
• Don’t be afraid to make changes to your blog layout over time to keep it fresh and up-to-date.

I assume that you already have a WooCommerce website and own a SellKit license (free for all Jupiter X WP users) and now you want to add the Klarna Express Pay button to your shop checkout. SellKit is a booster for WooCommerce stores, offering sale funnels, smart discounts, smart coupons and notices with analytics and customer segmentation. If you are new to SellKit or WooCommerce, you can get it here for free and learn how to use it here. 

Install Klarna Checkout for WooCommerce

You can download Klarna Checkout for WooCommerce from the WordPress plugin page.

After downloading and activating the plugin, navigate to WooCommerce > Settings > Payments and then press the Manage button to access the plugin settings page.

Configuring Klarna Checkout

From the Payments tab of the Klarna Checkout settings page, make sure to enable it for your store.

Then head to the test environment, where you can check the test mode feature.

Now let’s get the required API keys from the official website.

First, go to Klarna Docs at docs.klarna.com and click on the merchant portal at the top right corner.

Choose the region based on your store’s location. 

For test purposes, choose the Playground option from the environment dropdown field. For the live website, choose the Production option.

Then, press Login if you already have an account or Sign Up to create a new account.

After logging in to your account, go to the Settings page.

Follow the steps in this screenshot to generate new API keys.

In the next step, Klarna will generate a username and a password. Save the password because you can’t retrieve it later and will have to create a new one.

Now go to your WordPress admin dashboard and add the username and password to the following Klarna settings to activate the gateway. 

Save and navigate to the SellKit Funnel -> Checkout Step. You should see the Klarna Express Checkout button, which should be visible in the payment list section.

The button should also be visible in the gateways list. 

That’s it! We’ve finished configuring for Klarna Checkout.ِYou can now see the Klarna payment button in your checkout pages. Enjoy using it and make sure that your store visitors are aware that you have added Klarna as a payment option.

Conclusion

More payment options means more flexibility for customers, which leads to more sales. With Klarna, customers can pay later in four installments, while a single pay button allows customers to make a purchase in the blink of an eye. In this article, we learned how to integrate Klarna with WooCommerce while benefiting from SellKit features. 

If you have any questions, please feel free to ask us in the comments.

Imagine you have an online printing shop, and you want to give customers the ability to upload their logo or design and attach it to their orders. As you know, WooCommerce default checkout fields have no upload option, even though we sometimes need to let the user upload a file during the checkout process. 

In this tutorial, I am going to show you how to add a file uploader to the checkout page. Attaching files to an order has a lot of use cases, but make sure to take security precautions since it allows everyone to upload something.

This method works with JupiterX or any other theme.

Adding a file uploader on the checkout fields

First, we need to add our uploader to the checkout fields. We can use WooCommerce native hooks to add our field to any section of the checkout page that we like.

I am going to add a file uploader to the checkout page after the billing email field using the following hook.

woocommerce_after_checkout_billing_form

 The uploader will appear after this field:

Add the following code to the functions.php file of your theme:

add_action( 'woocommerce_after_checkout_billing_form', 'add_file_uploader_to_checkout' );


function add_file_uploader_to_checkout() {
    ?>
        <div>
            <label>File Uploader</label>
            <p>
                <input type="file" name="billing_file" id="checkout-file-uploader" >
                <input type="hidden" name="file_uploader_id_holder" id="file_uploader_id_holder" >
            </p>
        </div>
       
    <?php
}

The checkout page should look something like the following image:

Now we are ready to upload the file.

Upload a file using the added field and Ajax

Add the following code snippet to your functions.php file so that when a user uploads a file, it is uploaded to the WordPress media library.

add_action( 'wp_footer', 'upload_file_on_checkout_by_ajax' );


function upload_file_on_checkout_by_ajax() {
    ?>
        <script>
            jQuery( document ).ready( function( $ ) {
                $( '#checkout-file-uploader' ).change( function() {
                    const file = document.getElementById( 'checkout-file-uploader' ).files[0];
                   
                    if ( 'object' !== typeof file ) {
                        return;
                    }
                   


                    const formData = new FormData();
                    formData.append( 'checkout-file-uploader', file );


                    $.ajax({
                        url: wc_checkout_params.ajax_url + '?action=upload_checkout_file',
                        type: 'POST',
                        data: formData,
                        contentType: false,
                        enctype: 'multipart/form-data',
                        processData: false,
                        success: function ( response ) {
                            $( '#file_uploader_id_holder' ).val( response.data );
                        },
                        error: function ( response ) {
                            console.log( response.data );
                        }
                    });
                } );
            } );
        </script>
    <?php
}

In the above code, we included JavaScript to handle the upload process. If the upload process is successful, it will add the uploaded file URL to a hidden field for later use.

Let’s handle this Ajax call by adding the following code to your functions.php file:

add_action( 'wp_ajax_upload_checkout_file', 'save_File_to_media' );
add_action( 'wp_ajax_nopriv_upload_checkout_file', 'save_File_to_media' );


function save_File_to_media() {
    $upload_to = wp_upload_dir();


    if ( ! isset( $_FILES['checkout-file-uploader'] ) ) {
        return;
    }


    // Just allow these types of files
    $allowed_files_type = [ 'image/png' ];


    if ( ! in_array( $_FILES['checkout-file-uploader']['type'], $allowed_files_type, true ) ) {
        wp_send_json_error( 'This type of file is not allowed' );
    }


    // Do not allow based on size.
    $allowed_size = 100000; // 100KB


    if ( $_FILES['checkout-file-uploader']['size'] > $allowed_size ) {
        wp_send_json_error( 'File size can not be bigger than 100KB' );
    }


    $path = $upload_to[ 'path' ] . '/' . basename( $_FILES[ 'checkout-file-uploader' ][ 'name' ] );


    if( move_uploaded_file( $_FILES[ 'checkout-file-uploader' ][ 'tmp_name' ], $path ) ) {
        $url = $upload_to[ 'url' ] . '/' . basename( $_FILES[ 'checkout-file-uploader' ][ 'name' ] );


        wp_send_json_success( $url );
    }


    wp_send_json_error( 'We could not upload file' );
}

We’ve applied some limitations to the above code. For example, we just allowed PNG image files that are less than 100KB to be uploaded. This step is good for user experience and a great way to avoid security breaches. Make sure to mention the limit somewhere near the upload field or on your checkout page.

Now that the file is uploaded to the media library, the file URL can be added to the order post meta so that the admin can see it in the order page via the admin area.

Add the uploaded file address to the order page

To do this, we need to hook one of the WooCommerce actions when an order is created, (once a user presses the Place Order button) and store the address URL as a meta for the order post:

add_action( 'woocommerce_checkout_order_processed', 'add_address_to_order', 99, 1 );


function add_address_to_order( $order_id ) {


    $file = FILTER_INPUT( INPUT_POST, 'file_uploader_id_holder', FILTER_SANITIZE_URL );


    if ( empty( $file ) ) {
        return;
    }


    update_post_meta( $order_id, 'uploaded-file-checkout', $file );


    wp_send_json_success();
}

Now we are going to show the URL address via the admin area > order screen page using the following code snippet.

add_action( 'woocommerce_admin_order_data_after_order_details', 'display_url_address' );


function display_url_address( $order ){


    $file = get_post_meta( $order->get_id(), 'uploaded-file-checkout', true );


    if ( empty( $file ) ) {
        return;
    }


    ?>
        <p class="form-field form-field-wide wc-customer-user" style="padding-top:20px">
            <img width="250" height="250" src="<?php echo esc_url( $file ) ?>" />
            <br>
            URL: <?php echo $file ?>
        </div>


    <?php
}

Here is the result:

The admin can now see the image and the URL address as well.

Conclusion

There are many ways to customize your WooCommerce store checkout page. In this blog post we learned how to add a file uploader to your store that allows customers to add a file or picture to their order.

In this post, we’ll delve into the benefits of the Advanced Menu widget, recently released in the new Jupiter X v3, walk you through the steps to create different types of menus and share best practices to create eye-catching menus. 

Introducing the Advanced Menu Widget

The new Advanced Menu widget in Jupiter X improves the menu-building experience in two major ways.

Versatility

The new Advanced menu widget provides you with the flexibility to design various types of menus to match the overall aesthetics and functionality of your website, improve website navigation and enhance the usability of your website. 

Whether you need a simple regular menu for a straightforward navigation experience, a dropdown menu for organizing sub-menus, a mega menu for displaying a large number of items, a full-screen menu for a unique and immersive navigation experience, a side menu for adding a sidebar menu to your website, or even a horizontal or vertical menu for a creative and customized layout – the Advanced Menu widget can help you create all types.

Visual front-end editing 

This is about the main challenging aspect of building menus in WordPress: back-and-forth backend and frontend editing. The new advanced menu builder widget eliminates the need for tedious backend editing and offers a completely visual editor to build and modify any type of menu.

Using the drag-and-drop functionality and visual controls you can track and adjust your menu design in real time and make sure it fits the website’s overall look and purpose. 

How to create Advanced Menu in Jupiter X

Using the old Mega Menu, you need to create the menu in the Menus section, add the Mega Menu widget to each menu then assign templates to each menu item separately. In other words, you need to add a sub-menu and assign a section template to it. The section template will show as your mega menu when you hover over the parent menu item.

Following the introduction of the Layout Builder in the Jupiter X2 update however, all steps are gathered in one place in the frontend and you just need to use the Advanced Menu widget to create different types of menus easily and in seconds.

Before starting to create your menu first you need to make sure Advanced Menu is installed for the Elementor page builder. Go to Jupiter X > Settings > Elementor and check if the Advanced Menu feature is checked off in the list.

Create a new header in Layout Builder and open it, search for the Advanced Menu in the Elements section, and drag it to your page. This is the first step in creating and customizing various types of menus as you please.

There are 4 types of layouts available you can choose from to create your menus: Horizontal, Vertical, Dropdown, and Off-Canvas.

Horizontal menus located usually on top of the website and running horizontally across the page, are a popular navigation choice for websites as they provide a user-friendly, space-saving, and design-flexible navigation option that can enhance the overall user experience of a website. They can be expanded to show sub-navigation options or dropdown menus, but they are generally limited in the amount of information they can display.

Vertical menus are typically located on the right or left side of the website and run vertically. They are designed to display a range of navigation options in a single column and can be expanded to show submenus or dropdowns. Vertical menus are often used for websites with a large number of navigation options, or for websites with a more modern, minimalist layout.

Dropdown menus are designed to display a list of navigation options in a vertical or horizontal list. When a user hovers or clicks on a menu item, a dropdown menu appears with a list of related submenus. This allows website owners to display a large amount of information in a compact space, and it can be a useful way to organize navigation options.

And finally, Off-Canvas menus tend to be more space-saving than the others, as they are designed to be hidden off the screen and only appear when triggered by a specific button or icon. This frees up valuable screen space and presents a cleaner interface. This also makes the Off-Canvas menu more user-friendly on smaller screens like mobile.

Best Practices for designing appealing menus

When designing menus using the Advanced Menu widget in Jupiter X V3, there are several best practices you can follow to create appealing and effective menus that enhance your website’s user experience. Here are some tips to consider:

Keep it simple

A clean and simple menu design is often more effective in helping users navigate your website. Avoid cluttering your menu with too many items or complex layouts that may overwhelm visitors. Stick to a clear and concise menu structure that is easy to understand and use. Always remember that “less is more”!

Use visual hierarchy

​​Utilize visual hierarchy to prioritize important menu items and guide users to the most relevant sections of your website. Use larger font sizes, bold or italic styles, and different colors to differentiate between different levels of menu items. This helps users quickly identify and access the information they are looking for.

Mind the responsiveness

With the increasing use of mobile devices for browsing, it’s crucial to ensure that your menu is mobile-responsive and works well on smaller screens. Use the Advanced Menu widget’s mobile menu styling options to create a seamless and user-friendly experience for mobile users. Test your menu on various mobile devices to ensure smooth navigation and readability.

Make it visually fun

Consider adding visual items such as icons, arrows, or hover effects to your menu items to make them more visually appealing and catching. This can help users quickly understand the functionality of each menu item and enhance the overall navigation experience.

Let’s wrap it up!

The Jupiter X v3 Advanced Menu widget offers a powerful and versatile solution for designing visually appealing and user-friendly menus all through frontend editing for your WordPress website.

This widget serves as a great replacement for Elementor Pro’s menu builder or any other third-party library, meaning that you won’t need to pay for any extra fees or subscriptions and make use of this widget along with many other native widgets built right inside Jupiter X core.

Let us know in the comments how you found this widget and how it helps with your website menu design. Is there any other best practice to follow when designing a menu for a WordPress website?

When you run an online store, every single thing you decide to show to the store’s visitors can affect the visitors’ intent to make the purchase. That’s why shop designers obsess over copy, use the highest-quality images, pay special attention to colors and layouts, and ensure that every element of the website and each page is just right. 

The add-to-cart button is one of those elements. It’s an almost obligatory element for any online store, serving the dual purpose of reminding the shopper of what you want them to do on a product page – add the product to the cart – and giving them a handy way to do so. 

However, because they’re not as prominent as call-to-action buttons, it can sometimes seem that the add-to-cart button doesn’t get the attention it deserves. In this article, we’ll try to rectify that and help you create the perfect add-to-cart button for your online shop.

Add-to-Cart Button Improvements – What’s at Stake?

An add-to-cart button is one method you can give to customer disposal for shopping in your online store. It implies that a shopper will add an item, a service, or a specified amount of it, into a cart that could include other items that could be edited, left for a later review, or completely abandoned. 

Add-to-cart buttons don’t have the immediacy of buy-now buttons. But, on the other hand, they’re not a part of a long process like request-a-quote buttons can be. They’re somewhere in between but still a prime candidate for careful design planning and deliberate optimization. 

The worst thing an add-to-cart button can do is – not work. If a website visitor clicks on it and nothing happens, that problem goes over the scope of optimization. It warrants the attention of a developer, probably with experience in troubleshooting WooCommerce, the most popular store platform for WordPress. 

The second worst thing is that the button doesn’t perform its function well. For example, the button might be challenging to see or discern, it could have text that’s not appropriate, or it could just look and act in an unappealing manner. Whatever the reason for its poor performance, the result is the same and visible in the shop’s bottom line.

Crafting the Perfect Add-to-Cart Button

The add-to-cart button is a feature that comes with WooCommerce, so there’s no need to build one from scratch. However, creating a button that matches your website’s needs is entirely different, as there’s no way of doing it easily without third-party solutions. 

Changing the text of the add-to-cart button is a great example. There’s no easy way of doing it natively. Even WooCommerce recommends doing it by adding the following code to your child theme’s functions.php file:

?php
// Change add to cart text on single product page
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocommerce_add_to_cart_button_text_single' ); 
function woocommerce_add_to_cart_button_text_single() {
    return __( 'Add to Cart Button Text', 'woocommerce' ); 
}
// Change add to cart text on product archives page
add_filter( 'woocommerce_product_add_to_cart_text', 'woocommerce_add_to_cart_button_text_archives' );  
function woocommerce_add_to_cart_button_text_archives() {
    return __( 'Add to Cart Button Text', 'woocommerce' );
}

Changing the looks of the button, in that case, involves adding custom CSS to your website. Even though the Theme Customizer makes that process more accessible and interactive than adding lines of code in a file or plugin, it’s still a bad option for people who don’t know CSS. 

The other option is to use a plugin. For Elementor users looking to broaden their choice of widgets, the Qi Addons for Elementor plugin is a solid choice. With more than a hundred widgets in its premium version, the plugin can help its users with many incredible things in Elementor – including crafting the perfect add-to-cart button.

The Add-to-Cart Button widget is one of the free widgets available with Qi Addons for Elementor. Its options will let you select the layout of the button, its type, and size, as well as change the button icon and set its position.

More importantly, the styling options let you choose the color and shape of the button, the typography of the text, as well as the look of the button on hover.

Anyone familiar with Elementor will have no trouble tweaking the add-to-cart button to perform perfectly. Still, having complete control over the look and behavior of a button is one thing. Knowing which things might lead to better button performance is another.

Tips for a Better Add-to-Cart Button

When creating the perfect add-to-cart button, it’s essential to understand that there’s no such thing as a standard button. Instead, you’re looking to create the best add-to-cart button for your exact shop. With that in mind, let’s see some popular principles that might lead you to create a decent add-to-cart button.

Choose the Right Color

When choosing the right color for your add-to-cart button, it’s easy to follow the advice usually given for calls-to-action and make the button red. And that might work – as long as the red stands out nicely against the background color. 

Blue, green, or even a dark gray color can be a solid choice for an add-to-cart button. Still, instead of thinking about specific colors, think about visibility, and choose accordingly. Try some gradients, too.

Don’t Overdo It with the Text

An add-to-cart button is not a good place to practice copywriting skills. For the most part, sticking with the generic term will suffice. 

The exception to the rule is if you’re using a branded term for adding items to the cart. That’s a risky choice and must be made as part of the overall branding strategy. 

The one thing where you can’t go overboard with the text is visibility – make sure it stands out against the button. Choose a legible font and a color that won’t be drowned out by the color of the button.

Give It Some Style

A great way to make the button more attention-grabbing is to include several style choices, such as borders or even a shadow.

The trick, of course, is to avoid overdoing it. If these stylings make the text illegible or the button too cluttered, don’t use them. Color, size, font, and positioning alone can get you good results.

Mind the Edges – or Don’t

Having 90-degree edges on an add-to-cart button is a controversial choice. Current best practices often say that edges should be rounded, citing people’s innate fear of sharp edges as their rationale. 

Even if that were true, if your overall website design calls for rectangular buttons, that’s how you should make them. If the buttons stand out in the wrong way, they’ll affect the perceived quality of your website. This, in turn, might undermine people’s trust in your shop. And that’s a big problem.

Make the Button Reactive

A great tip is to add some motion or changes to the button when people hover over it. It doesn’t have to be a flashy animation. It shouldn’t be. 

Something small, like thicker borders or a slight color change, can go a long way to make the button more appealing.

See It from the Customer’s Perspective

The final advice for creating the perfect add-to-cart button is always to take the extra step and view it from the shopper’s perspective. This means testing it regularly to ensure the button isn’t broken. 

It also means shopping in the store occasionally, as regular customers do. It means adjusting the page’s layout to fit the devices people use to shop at your store. Decluttering, so the button is readily visible is another essential part of seeing things from the shopper’s perspective.

Let’s Wrap It Up!

Your store’s add-to-cart button is an essential element for the store’s performance. More important than its role of enabling people actually to add your products to their cart might imply. As such, it’s a button you should pay attention to and occasionally improve for better performance.

If you’re using WordPress and WooCommerce, the easiest way to customize your add-to-cart button and make it perfect for your store is via third-party plugins. For example, if you need to change the size, shape, and color of the button and you happen to use Elementor, Qi Addons for Elementor is the perfect plugin for you.