Since the release of WordPress 5.0, many websites have switched from the WordPress classic editor to the Gutenberg block editor. While blocks are a core part of the WordPress experience, some may prefer to use the classic editor to create and manage a website. Fortunately, there are several ways to install and configure it, and […]
The post How to Install and Configure WordPress Classic Editor in 2023 + Best Usage Practices appeared first on Hostinger Tutorials.
The WordPress 6.4 release squad has decided to punt the planned Font Library feature to 6.5 after core maintainers found major gaps in the Font APIs that cannot be resolved in time for the upcoming release.
“I am currently reviewing the font APIs PR,” WordPress REST API co-maintainer Jonny Harris said. “I must say, I am very worried about the PR in its current state. The code simply doesn’t follow the WP core code style and doesn’t feel WordPress.” He listed a number of problems he found with the feature:
wp_insert_font / wp_create_font etc.edit_theme_options“With time very limited in this release, it feels like actioning the above, feel like it is going too hard to achieve in this release,” Harris said.
“I think this feature needs some more time to bake.”
Harris said none of the REST API maintainers were involved in the early stages of the Font Library feature and they are currently “playing catch up.” The team was attempting to patch the existing design, but Harris said if a redesign of the API is planned, he would like to understand the requirements for the feature before drawing up a design.
Punting a flagship feature is never an easy decision, but it’s far more preferable than shipping poorly designed API’s that don’t allow users to modify and disable the feature to fit their needs.
“No is temporary but yes is forever,” WordPress core committer Aaron Jorbin said. “Once the code is merged into core for release, it’s something that needs to be maintained for our extenders forever. To me, the concerns I see being raised about how people will extend the feature are enough to punt the feature.”
The Font Library feature was put forward late in the release cycle, landing in Gutenberg 16.7 last week, with very little time for testing.
“Features have landed after beta 1 in the past,” WordPress core committer Jonathan Desrosiers said. “But my preference is to not land something with this much outstanding feedback. We’d be making last minute changes and merging for public release with very little actual testing. Sure, everyone here would test as best they can. But ‘in the wild’ WordPress testing is much different and always uncovers some strange use cases or issues that we can’t foresee.”
Contributors briefly considered delaying the release date to allow the feature more time but the consensus was for punting to 6.5, with the decision anchored in WordPress’ philosophy of “deadlines are not arbitrary.”
“Changing a scheduled release date to leave room for finalizing a feature—no matter its priority—should not be considered,” WordPress core committer Joe McGill said. “This would not be the first time that we really hoped to have a feature shipped in a release but delayed it to the next release. It seems to me that a lot of effort has gone into preparing this feature for release and the consensus is that folks need more time to get it into a state that is ready to ship in a major WordPress release, which I know is disappointing, but also speaks to the care and quality folks want to ensure we put into these releases. If it’s not ready, it’s not ready. Let’s delay it — meanwhile we are still getting valuable user feedback via the Gutenberg plugin, which is a good thing.”
WordPress 6.4 release lead Josepha Haden Chomphosy made the difficult decision to punt the feature based on contributor feedback. The removal of the Font Library does not affect other key features anticipated to land in the release. Jessica Lyschik, 6.4 default theme co-lead, confirmed the Font Library isn’t a requirement for Twenty Twenty-Four. The theme will ship with preselected fonts that get loaded from the theme assets, just like previous default themes.
WordPress 6.4 Beta 3 is scheduled for October 10, 2023. This will be the last scheduled beta before RC1.
September marked a shift in focus for the WordPress community. With major WordCamps wrapped up, all attention is now on WordPress 6.4 – the final significant release of 2023. The first beta version is out, giving us an early look at what to expect.
As for Hostinger, we have released some exciting updates for our AI Assistant plugin to make your website more SEO-friendly and enhanced our WordPress Blog theme to give you more customization options.
Let’s dive into the WordPress news and updates for September. If you miss anything or have feedback for the community, complete the WordPress Annual Survey.
Let’s start by looking at the new features we have released for our WordPress products.
We rolled out important updates to our WordPress AI Assistant plugin. The AI now generates SEO meta descriptions and keyword suggestions. These features are designed to boost your position in search engines and click-through rates.
You’ll see new sections in the AI Assistant panel where you can edit these generated suggestions.
In addition, the AI Assistant is now available in nine languages:
If your WordPress site uses one of these languages, the plugin’s interface will automatically follow the defined language. Here’s an example of the interface when we set the language to French.
We have also improved our WordPress Blog theme by adding a font selection feature during the onboarding process and in the theme settings on the WordPress dashboard. As a result, you will get more customization options for your design.
Each year, WordPress carries out a survey to gather feedback from users, developers, and contributors and identify key areas that need improvement. The survey helps the WordPress team understand users’ needs and select the direction to move the project forward.
This means that every response is crucial for creating a better user experience and improving the platform.
The survey is available in 10 languages you can choose on the site for your convenience. You can start filling out the survey by visiting the WordPress Annual Survey website.
The first beta version of WordPress 6.4 was launched at the end of September, introducing plenty of workflow enhancements, as it backported six latest versions of Gutenberg – from 16.2 to 16.7 – into the core. The release date for this new version is November 7.
We will write a detailed post about our beta testing to preview the new version. In the meantime, here’s a short glance:
We’ve released two podcast episodes featuring interviews with WordPress experts Hari Shanker and Destiny Kanno, recorded during WordCamp US 2023.
In our conversation with Hari, we discussed initiatives like Five for the Future and Contributor Mentorship, exploring their impact on the future of WordPress.
With Destiny, we delve into her involvement with the Learn WordPress platform and its evolution to guide new users, including introducing new learning pathways.
These insightful episodes are available on our Hostinger Academy YouTube channel. Alternatively, you can read the corresponding blog posts for Hari Shanker and Destiny Kanno.
WooCommerce has rolled out the beta for its upcoming 8.2 version, set for release on October 10. A notable change is the PHP requirement, now elevated from 7.3 to 7.4.
This move aligns with current trends, as PHP 7.3 users are declining. Dropping support for older PHP versions also improves WooCommerce security and prepares for better compatibility with PHP 8.X versions.
If your WooCommerce site is on PHP 7.3 or lower, it’s time to upgrade to 7.4. Use our staging environment and hPanel’s PHP configuration to make the transition seamless.
Development for WordPress 6.4 is ongoing and might change before its November release. If you’re keen on testing the developmental version, use the Beta Tester plugin. Ensure you’re working on a secure test site or a staging environment.
Stay tuned for our October roundup on the latest WordPress news and developments.
The post This Month in WordPress: September Roundup appeared first on Hostinger Blog.
WordPress is a powerful content management system (CMS) that anyone can work on. However, if you’re new to the platform, you might be wondering – is WordPress open source? In this post, we’ll provide a brief introduction to open source software and the benefits of using it. Then we’ll dive deeper into the question – is WordPress open source?
The post Is WordPress Open Source? This Is What You Need to Know appeared first on Themeisle Blog.
Dollie is an expansive site management solution for WordPress that we love here at WP Mayor. However, it’s also perfect if you wish to generate revenue using a cutting-edge, revenue-generating tool. This post will show off Control HQ, and discuss how it can be part of your own WordPress monetization revolution!
The post “How Dollie’s Control HQ Is at the Forefront of a WordPress Monetization Revolution” first appeared on WP Mayor.
When building websites in WordPress, high-quality images are crucial to the design. With high-resolution displays being the new norm, your images must have the right size and resolution for all devices. But what happens when you are stuck using an image that’s not big enough or looks blurry? You can try to find a new image or simply use an image upscaler. With the power of AI, a good image upscaler can magically transform your small, pixelated images into high-resolution masterpieces in a few clicks. In this guide, we’ll learn more about image upscaling, upscale some images on WordPress, and explore a variety of image upscalers you can use in future projects.
Image upscaling is the process of increasing a digital image’s size, resolution, or dimensions without losing image quality. This can be done using AI technology that uses deep learning, neural networks, and AI algorithms to enhance the image with the additional pixels it needs. It is a powerful solution for web designers looking to enlarge and enhance images while maintaining a quality that will not degrade the initial provided image.
Popular image upscalers like Topaz Photo AI can do this outside of WordPress. In the above image, we can see that the quality of the initial image is subpar. There’s some pixelation; the image appears blurry and can’t be used at a higher resolution. However, the second image is much clearer: we can see the details within the features, the image colors are brighter, and the final product can be used in a larger and smaller form. This is an excellent example of the benefits of upscaling images.
In WordPress, once your image is uploaded, the original (or intrinsic) size and dimensions of the image are set. Sure, you can make the image smaller if you want. In fact, WordPress will create smaller versions for you to help render the right size on your website. But making them larger is a different story. If you want to make it larger, you can’t just increase an image’s dimensions in the Media Library or manually give it a larger width and height on your page. This will stretch the images and their pixels beyond their intrinsic value and render them with less quality and blur.
To make an image larger in WordPress, you need an image upscaler. Upscaling uses AI to ensure that the enlarged image maintains quality while increasing its size and dimensions. While the image’s dimensions are increased, the quality of the image is maintained and often enhanced with a result that often looks even better than the original. When working in WordPress, having this handy tool available saves you from having to search for better high-quality images or use other third-party tools for upscaling.
Many benefits come with upscaling images for your WordPress website:
Now that we understand how upscaling our images can benefit our WordPress website, let’s explore how we can implement this practically with Divi and Divi AI.
Divi, our powerful AI WordPress theme and page builder, ships with a powerful AI assistant for your website called Divi AI. It incorporates various AI features into your WordPress website, including image upscaling. Let’s explore how we can utilize these WordPress tools to enhance the dimensions of our images without compromising their quality.
If you’re new to Divi, your journey starts by getting a membership and downloading Divi from your member profile. Then, you can follow this excellent guide showing you how to install Divi. It covers many topics that will help you install Divi on your WordPress website, including downloading the theme’s ZIP file, installing it in WordPress, and authenticating your website with Elegant Themes.
Divi AI is a powerful AI tool that works hand in hand with Divi and the Divi Builder plugin. You’ll have access to Divi AI out of the box with a free trial, and you can upgrade to an unlimited version at any time. This will give you full access to Divi’s AI image generator (and upscaler) as well as Divi AI’s writing assistant for generating content with AI.
Once Divi is installed and activated, and you have procured your Divi AI license, we can start upscaling some images! If you’re already a member of the Divi family, great! We’re happy to have you!
Whether working on an existing page or creating a page from scratch, the upscaling process with Divi AI is the same. You will edit your image, use the Divi AI upscale command, and then Divi AI will automatically re-insert your image in the same place. Let’s go over how to do that now with a brand-new page in WordPress. From the WordPress dashboard, hover over the Pages menu link. Then, click Add New. This will create a new page for us.
Name your page, then click the purple Use Divi Builder button.
From the three options presented, choose the first choice. Click the blue button that says Start Building, and now, you have a blank slate for upscaling your images.
Divi will automatically create a new section for you in the builder. However, you’ll need to add a new row. Click the two-column row layout from the row modal box to do this.
Next, enter the word “image” into the search box for the Module modal box. Click on the Image Module to add it to the first column in your newly added row.
With our Image Module in place, let’s upload an image from our hard drive to WordPress and upscale it. Inside the Image Module, click the gear icon. This is where the Media Library will open up. You can select an existing photo from your library or upload a new one. We’re going to select an image that’s already in our Media Library.
Once you’ve selected your image, please take note of its dimensions and file size. We’ll use this information later to compare the effects of upscaling images in WordPress with Divi AI. Finally, click the Upload an Image button to add your image to your page. Now, we can run the image upscaler present in Divi AI.
Once our image has been selected in the Divi Image Module, we can activate Divi AI. Click on the Divi AI icon next to the image’s settings icon.
Then select the Upscale feature. Finally, choose between the 2x and 4x options for your upscaling.
The beauty of using Divi AI for your WordPress upscaling needs is that you never have to leave the WordPress dashboard. There’s no need to open a program on your desktop or visit an external website to upscale your image. You can upscale your image within the Divi Builder without requiring additional tools or downloads.
After a short wait, you’ll notice that your page looks the same. But is it? Let’s take a deeper look.
Click the gear icon to access the Media Library and see what Divi AI has done under the hood.
The first thing we notice is that our original image has been duplicated. Divi AI is smart enough to back up our image before performing upscaling tasks. Next, when we click on our new upscaled image, we notice that its dimensions have changed. It’s now almost double in size, which aligns with the 2x upscaling option we selected in Divi AI. However, its file size is still manageable and light.
Furthermore, if you compare both images, you can see a noticeable difference in the quality of our upscaled image.
Our upscaled image is sharper, and the colors in our new photo are more vibrant. Not only does the Divi AI increase the dimensions while maintaining the quality of our upscaled images, but it also refines them. Let’s look at the new statistics of our images from the Media Gallery.
Our original image was 510px by 335px. It was also 178kb. While still a light image, our upscaling can help us be more optimized. Divi AI was able to not only almost double the size of our image but it was also able to compress the image without decreasing the quality of the image.
Additionally, when you look at the image in the Divi Builder, even though the size of the image has changed, its quality has increased alongside the change in dimensions:
Image 1 is our new and improved image, and image 2 is our original image. Both of these images are within a one-column row layout in Divi. We can see that image 1 is larger. However, when you look closer, you can see that the image is sharper, the colors are more precise (notice the hair and nails), and the skin on the model has improved. Even though the original image is smaller, it is still not as straightforward as our upscaled image.
This gives us better images overall for our web pages without leaving the WordPress backend or using external tools. It’s clear that when you choose to use Divi AI as your WordPress image upscaler, you will get fast, easy, and excellent results for the photos and images on your website.
While Divi AI is an excellent tool for upscaling images in WordPress, you may want additional upscaling capabilities that Divi AI may not have… for now. With this in mind, here are other image upscaling tools that you can use outside of WordPress for your website:
These external image upscalers require you to perform upscaling tasks outside of WordPress and then import your images into the Media Library. However, using a tool like Divi AI is more convenient and saves you valuable time. As such, its a great toool for an efficient web designer.
Image upscaling is a necessary part of preparing your images for the web. Instead of using tools outside your WordPress installation, you can now find image upscaling capabilities through Divi and Divi AI. Performing image upscaling directly within the Divi Builder helps you refine your process and stay on track when building your websites.
However, suppose you’re looking for a desktop application or an API to give you more image upscaling power. In that case, other AI upscale tools are available that you can use in conjunction with WordPress. Have you tried to upscale your images in WordPress? What tool did you use? Have you tested Divi AI’s upscaling feature yet? Let us know in the comments; we’d love to hear from you!
Finally, check out our top tools collection for a full deep dive into the various AI tools you can use with your WordPress site. There, you’ll find an arsenal of platforms and programs that you can use on your WordPress website. From photo enhancers to AI design tools, we’ve gathered the best in the business regarding AI and WordPress!
The post How to Upscale Images in WordPress appeared first on Elegant Themes Blog.
Timelines are a popular design element in web design that enable designers to display a sequence of events or information in a visually appealing way.
Using timelines in web design is a structured way to present content, thus making it easier for users to digest information. In this article, we’ll present various types of timeline designs, best practices, and a step-by-step tutorial on how to create your own timeline layout on WordPress.
There are several types of timeline designs to choose from, each suited to different content and design preferences. Here are some popular options:
Vertical timelines are ideal for presenting a series of events in chronological order. They work well for historical timelines, project progress tracking, and personal histories.
Like the example above, it shows a timeline of social networking sites and their years of establishment.
Interactive timelines engage users by allowing them to click or scroll through events for more details. This format is excellent for storytelling, as it encourages user interaction and exploration.
In the example, the timeline shows a very brief history of a company with image boxes that provide a button for users to click.
Chronological timelines strictly adhere to a linear sequence, making them suitable for historical events, biographies, highlighting milestones, and other content where the order of events is crucial.
Step-based timelines break down processes or workflows into manageable steps. They are commonly used for tutorials, instructions, and project workflows.
If you are thinking of adding a timeline to your website, it’s easy to make some mistakes and miss the opportunity to engage your website visitors. To make the most of timeline designs in your web projects, follow these best practices:
Ensure that event labels and descriptions are clear and concise. Use descriptive titles and provide additional information when necessary to maintain clarity.
Simplicity is key. Avoid cluttering your timeline with too many events or details. Focus on the most important information to maintain a clean and engaging design.
Make sure your timeline is responsive, meaning it looks and functions well on both desktop and mobile devices. Test your design across various screen sizes to ensure a seamless user experience.
Visual elements like icons, images, and color coding can enhance the visual appeal of your timeline and help users quickly identify different types of events or milestones.
Consistency in design and layout throughout your timeline helps users navigate with ease. Ensure uniform spacing, fonts, and colors for a polished look.
Creating a timeline layout for your website doesn’t have to be a daunting task. There are various tools and plugins available to simplify the process. If you’re using WordPress for your website, you can easily add timeline functionality with plugins like “Timeline Express” or “Cool Timeline.” These plugins offer customizable features and a user-friendly interface for creating and managing timelines.
However, if you’re looking for a more all-around solution, then you might want to consider Stackable! Stackable is a versatile plugin for WordPress that offers a plugin library and multiple features that extends the WordPress Block Editor’s functionality.
With Stackable’s Timeline block, you can create stylish and responsive timelines with ease and we’ll show you just how to do that!
From your WordPress dashboard, navigate to Plugins > Add New. Search for Stackable in the search bar and it should show up as the first result. Click the Install button and then click Activate.
From the dashboard, hover over Page or Post and select Add New. First we have to name the page, in this case, we’re naming it “A Year in Reviewâ€.
Next, we’ll start adding some details for our page. We added the Columns block and selected the 50 / 50 layout. In the first column, we’ll add our text and it’ll be the same as our page’s title. For the text, we selected a dark blue color. Additionally, we have to make some adjustments on the column’s layout to make it look more seamless. Selecting the first inner column, we headed to Layout > Block Size & Spacing and set the Max Content Width to 330. On the right column, we’ll add some text and adjusted the Max Content Width of its inner column as well; this time, we set it to 250.
After that, let’s select the whole Columns block and navigate to Layout > Layout and locate the flexbox controls. We’ll select the Center option for both Column Justify and Column Alignment. Then we’ll set the yellow bottom margin to 100 to give ample space from this block and the next block we’ll add below this.
Now let’s add a new Text block and here we’ll input the text “Scroll down to see moreâ€. Afterwards, let’s add the Icon block and select a downward facing arrow. We also changed the color of this icon to dark blue. We removed the yellow bottom margin for the text, then selected both blocks and merged it inside a Columns block. We also aligned it to center. Then going to the Advanced Tab, we’ll navigate to the Motion Effects panel to add some animation to this block group.
Selecting Entrance Animation will give this block an effect of appearing once the page is loaded. We set the Vertical Position to 100. and added a 1 second entrance animation delay.
Save our changes and let’s preview our design so far!
Now let’s add our first timeline point. Add the Timeline block by typing in “/timeline†in the content area. Then we’ll make some typography changes by heading to Style > Typography. Click on the Typography icon and here we can change the Timeline’s font. In this tutorial, we’ll use the Yeseva One font which is a Google font. We also adjusted the size to 20 pixels to make it larger.
Next, we’ll just adjust the Timeline’s colors, specifically, the line that connects the different points of our timeline. For the Timeline background color, we selected a dark blue color, and for its accent, we selected a lighter or muted teal. Now all that’s left is adding our content. On one side, we’ll add the month and description, and on another, we’ll add a picture.
Let’s hit save and preview how that looks in the frontend.
That’s looking great! Now we’ll move on to adding more points for our timeline.
To make additional timeline points, we’re going to duplicate the first block that we made and replace the content with the appropriate text and image.
We’ll keep doing this until we’re done for the rest of the points.
And that’s it! Now we’ll just make some finishing touches to our page.
Timelines are a valuable addition to web design, offering numerous benefits for enhancing user experience and storytelling. By choosing the right timeline design, adhering to best practices, and using user-friendly tools like WordPress plugins or Stackable, you can create captivating timelines that captivate your website visitors and effectively convey your message.
Start experimenting with timelines in your web design projects today, and watch as your content comes to life with engaging visual storytelling.
Remember, timelines are not just a way to present information; they are a journey through time that can leave a lasting impression on your audience.
You already know that WordPress is a powerful platform for content, but were you aware that it’s also one of the best eCommerce solutions? This guide will walk you through each step to create a successful eCommerce website with WordPress. From domain selection to hosting, installation, and essential plugins, we’ve got you covered.
WordPress shines as the premier content management system (CMS) used to build websites of all kinds.
The software is open-source and free to use, developed by and supported by a large community of volunteers. This makes the platform extremely flexible, giving you more control over your website functionality and allowing you to build an online store using countless eCommerce plugins and themes available. Although WordPress is free, there are common website expenses outside WordPress, including hosting, domain registration, premium plugins, and themes. But these prices are the same or better than other major eCommerce platforms, all things considered.
What makes WordPress equipped to handle your next eCommerce website? WooCommerce.
WooCommerce is the go-to WordPress solution for eCommerce. The WordPress editor is seamlessly integrated with WooCommerce and includes all the WooCommerce Blocks needed to build your store with a drag-and-drop interface. And it is simple enough for novice web admins to learn how to use it. It also has a plethora of add-ons available to help you achieve anything you need from it. It also gives users detailed dashboards and a convenient mobile app that allows you to keep tabs on your store’s performance from anywhere at any time.
Other benefits of using WooCommerce include:
Selecting the ideal eCommerce platform is a pivotal decision. In fact, there are some that may benefit from using other website builder platforms (outside of WordPress) like Shopify, Squarespace, or Wix. And there are WordPress membership plugins like MemberPress that offer standalone options for eCommerce. To help you decide, we’ve created comparison guides between WooCommerce and other leading website builders for eCommerce for you to dig deeper into.
But, we’ll assume that you’ll see the exceptional value in WordPress + WooCommerce and continue to the next step of how to build an eCommerce site with WordPress.
Selecting a hosting provider specializing in WordPress is pivotal for your eCommerce website’s performance and security. SiteGround is a top choice, finely tuned for WordPress and WooCommerce platforms.
Dive into our in-depth SiteGround analysis to explore its myriad features. SiteGround offers complimentary CDN, no-cost SSL, and email account governance in its hosting packages.
For alternative hosting solutions, consider our roundup of the fastest WordPress hosts or the best all-around hosting services. Quality hosting becomes doubly important when running a WordPress eCommerce site since it needs to be fast with around-the-clock uptime.
Navigate to SiteGround’s Site Tools dashboard. For other ways to install WordPress, read our definitive WordPress installation guide.
After signing into your SiteGround account, start the installation by clicking the “Set Up Site” button on your dashboard.
Choose the domain type for your WordPress eCommerce site. Opt for “Temporary Domain” if you wish to build before buying your domain.
For those eager to secure a domain upfront, follow this guide to register a domain. Click “New Domain,” find your ideal domain name, and proceed with the WordPress setup.
Click “Continue” to advance with the domain option that you’ve chosen.
Then, select “Start New Website” to continue.
Choose “WooCommerce” to ensure WordPress comes pre-installed with WooCommerce to make setup a bit quicker.
Configure your admin login credentials. Keep this information secure by following our password management tips. Click “Continue” to move forward.
Finally, hit the “Finish” button to set up WordPress + WooCommerce for your new WordPress eCommerce website.
Access your new WordPress dashboard by clicking “Log in Admin.”
You’ve got your hosting and maybe even a domain. Now, let’s set up your WordPress site for eCommerce.
You’ll find the settings you need under Settings in the sidebar of your admin dashboard.
Need more help? Check out these guides for each settings page to configure your eCommerce website the way you need it:
Now, let’s choose a WordPress theme that’s great for eCommerce. We recommend using our Divi Theme. Divi is a top pick because it is a powerful page builder that works seamlessly with WooCommerce. It’s easy to use and makes your store look good.
Why Divi is a good choice:
For other options, you can check out these top WooCommerce WordPress Themes.
First, get Divi from your Elegant Themes membership account after buying a membership. Log in and go to “Themes & Plugins” to download Divi.
In your WordPress dashboard, go to Appearance > Themes. Click “Upload Theme” and pick the Divi file you downloaded. Then c”Install Now.”
Click “Activate” to make Divi your theme.
Last step: add your Elegant Themes API Key. This keeps Divi updated with new features and security fixes. Grab the Username from your account in the “API Key” section.
“Generate New API Key” for your site. Give it a label so you know which site it belongs to. Copy the Key.
To add the API Key, go to Divi > Theme Options > Updates. Put in your Elegant Themes API Key (generate a new key for each site you create) and Username, then click “Save Changes.”
If you want to learn more about adding themes, check out this theme installation guide. But we think you’ll like using Divi for your WordPress eCommerce website.
You’ve done the basic setup. Now, let’s dig into creating your WordPress eCommerce website. This means setting up WooCommerce, adding products, and choosing how people will pay you.
This is where the fun starts!
The WooCommerce setup wizard makes getting your WordPress eCommerce site ready easy. If your host didn’t install WooCommerce for you (Step 1), check out our WooCommerce setup guide to get it added to your website.
Click “Home” under WooCommerce to start the wizard.
The wizard will ask for your store info, like your address and email.
Select the industry and product types that best describe your store.
Choose what your store needs. Checking certain boxes might add extra plugins to your site.
Note: Some plugins cost money. There are also free ones available. Check out our list of the best membership, booking, and free WooCommerce plugins to see how plugins can extend your eCommerce site.
The wizard will ask a few more questions about your store.
Last step: pick any extra plugins you may want. See our Jetpack and MailPoet reviews to see if those tools are worth it for you at this point. But if you anticipate needing to collect taxes, take credit card info, and handle shipping, those free plugins are worth it.
Now, you can tweak more settings in WooCommerce.
Ecommerce settings can be tricky. But WooCommerce makes it easier. You can control:
For more help, see our WooCommerce settings guide, which will walk you through each of these important pages.
Categories help people find what they want in your store. For example, if you sell clothes, you could have categories like “Men,” “Women,” and “Kids.” We suggest you make these before adding products.
To add categories, go to WooCommerce > Products in your dashboard. Then click “Categories.” These work just like categories and tags for WordPress posts.
If placeholder categories exist, you can edit or delete them. When choosing categories and tags, keep your customers in mind. Use intuitive and easy-to-understand terms.
You can add products individually or all at once with a CSV file.
To add them individually, go to Products > “Add New.”
Enter the product name.
Add a product description and upload your product image.
Next, select a product type. Then, set your item’s price and set your inventory levels. You can also set individual product shipping options. On the right-hand sidebar, set product categories and tags.
When you’re happy, click “Publish.” Add as many products as you want to your store.
Track your product stock with WooCommerce inventory management, and visit our detailed guide about setting up shipping in WooCommerce.
Since you’ve got Divi installed, let’s dive into designing your WordPress eCommerce site. With Divi, one of the best page builders for WordPress, you can design your site without touching code. This includes your product pages, cart, checkout, homepage, and blog. Divi’s WooCommerce modules are your go-to tools for building your WordPress store pages.
Divi has 2000+ pre-made layouts and 300+ website layout packs you can use, making setting up your WordPress eCommerce site quicker.
Open your homepage in Divi and click “Browse Layouts” to see your options.
You’ve got thousands of layouts to pick from. To make it easy, look for ones that say “Shop Page.” Click “Use this Layout” to add it to your page.
The layout will show your products immediately (inside the Woo Products module). You can change how many show up, how they’re sorted, and much more.
What if you want to show only one product? Add a new row and pick “Woo Products” from the WooCommerce modules list.
WooCommerce sets up some basic pages for you that Divi can help you customize:
Divi lets you edit each of these page templates on each page using the Divi Builder, or you can create a custom template for these pages using the Theme Builder.
Using the Divi Theme Builder is particularly useful for designing templates for your product pages, product category pages, and other site-wide design elements.
For example, you could download one of our free product page templates from our blog (like this Clothing Store Product Page Template) and add it to the theme builder to have a stunning global template for all your products. Or you can easily create your own product page template from scratch
For more help, check out our guides on making a cart page, setting up a checkout page, and using Divi for WooCommerce pages.
Want to know the beauty of WordPress and WooCommerce? You can add hundreds of features with thousands of possible plugins. Free and paid plugins can make your WordPress eCommerce site even better. Let’s look at some must-know categories of WooCommerce plugins.
Getting people to your WordPress eCommerce site is obviously important. That’s where SEO plugins like Rank Math SEO come in. They help you make your site more search-engine friendly by adding schema markup, XML sitemaps, and other SEO best practices. There are even WooCommerce SEO plugins that ensure ideal compatibility and functionality.
For a deep dive, check out our WooCommerce SEO guide. If you’re feeling adventurous, explore these AI-driven SEO tools.
Email marketing remains an essential tool for growing an eCommerce store. External services like Mailchimp for WordPress and plugins like MailPoet help you build and manage your email lists.
Use Mailchimp’s WooCommerce Integration to Increase Sales
You can then send general emails as well as eCommerce-specific emails with coupons or abandoned cart emails.
Conversion is king in eCommerce. Tools like OptinMonster and Bloom can help you get the most from your site by allowing alternate conversion for email signups.
You can also use Divi’s marketing tools to create A/B campaigns on your website and strengthen each landing page over time.
Advertising plugins can integrate seamlessly with platforms like Google Ads and Facebook to drive more traffic. Check out Advanced Ads for more control over your advertising campaigns.
For more WooCommerce plugins, Barn2 and Yith make lots of good options. And don’t forget to check the Divi Marketplace for solutions that work well with Divi.
You’ve gone through the ins and outs of setting up a WordPress eCommerce website. From selecting a hosting provider to configuring WooCommerce and optimizing your site for search engines, you’ve laid the groundwork for a successful online store.
WordPress and WooCommerce together offer a powerful, flexible platform for eCommerce. They allow you to customize every aspect of your store, from product listings to payment options. And with a wide array of plugins, your store’s functionality can expand as your business grows.
As your business scales, our extensive library of guides and reviews is here to support you every step of the way. Dive into our essential guides on how to sell online and master the best website marketing strategies. For tech-savvy insights, explore our reviews of top hosting companies, prime business tools, and standout WordPress plugins.
Featured Image by Julia Tim / shutterstock.com
The post How to Make a WordPress Ecommerce Website (2023 Easy Guide) appeared first on Elegant Themes Blog.
In the past, WordPress users without coding knowledge would either spend hours on Google searching for an answer or solicit the help of a professional web developer. With the emergence of artificial intelligence (AI), that is beginning to change. There are quite a few AI code assistant tools out there, but not all of them are geared specifically for WordPress. In this post, we’ll show you how to code in WordPress with AI so you can save your time and hard-earned money for other tasks.
Let’s dive in.
AI-assisted coding is the use of machine learning generative AI models that aid in creating code for WordPress. Most AI coding assistants let WordPress users describe what they want the code to do by entering a simple text prompt. From there, AI automatically generates the code for you, complete with custom variable names or CSS classes.
image created with Divi AI
There are several reasons to code in WordPress with AI. First and foremost, it allows novice coders or those with no coding knowledge to add PHP or JavaScript code snippets that change your site’s functionality. Similarly, AI can also generate CSS for you, allowing you to make advanced styling changes to your site’s design elements. Another reason you should consider using AI for coding in WordPress is to troubleshoot errors. If you’ve ever been in a situation where you are seeing the white screen of death or other common errors, AI can help you figure out where the problem is, and help fix it.
image created with Divi AI
There are countless benefits of coding in WordPress with AI. Let’s highlight a few so you will have a better understanding of how AI can help make your life easier:
image created with Midjourney
There are a couple of ways you can code in WordPress with AI. You can use an AI page builder like Elementor to create custom CSS or an AI tool like CodeWP for PHP. As of this writing, no plugin will allow you to code PHP inside WordPress. However, CodeWP was specifically trained using WordPress files and structure, so it knows its stuff. An added bonus is the ability to store snippets in the cloud so you can save them for reuse.
Before you start plugging custom code snippets into your site, you should do one of two things. We recommend either creating a child theme or a staging site. Doing both is a good idea, too. Regardless, your parent theme or live site will be protected from code snippets that could break your website.
Let’s go through the steps you’ll need to set things up and generate code in WordPress.
Elementor is one of the most popular page builders in the world. In recent months, they joined the AI revolution by offering text, image, and custom CSS generation. It works by activating the edit with AI button in Elementor’s front-end page builder in any module containing text or images.
For CSS generation, you’ll have to shell out for a pro license, but you can try Elementor AI text and image generation in the free version. With the pro version activated, hover over a section to reveal the edit section button.
Next, click the advanced icon in the sections’ settings.
Scroll to reveal the Custom CSS tab. Expand the dropdown menu to show the custom CSS box.
Click the edit with AI button above the custom CSS box.
When the dialog box appears, type in a text prompt, such as background color animation 2 colors (1). Then click the generate code button (2).
Elementor AI will get to work generating your code snippet. It could take up to a minute to render. Once complete, you’ll get a preview of your code. If satisfied with the results, click the insert button to add the code into the Custom CSS box.
Once your code is inserted, you can watch the animation live in the Elementor builder.
After your CSS code is live, you can change the colors, animation speed, and make other tweaks to suit your preferences.
If you’d like to easily generate CSS for your web projects with Elementor, you can sign up for a yearly Pro license for $59. Remember, to use Elementor AI’s CSS generator, you’ll need to sign up for a paid plan. Prices start at $2.99 per month for 18,000 credits.
CodeWP is an AI tool trained specifically using WordPress. It helps you create custom code snippets to extend its functionality or avoid using heavy plugins. When you are ready to implement generated code snippets, you’ll need to install a code snippet plugin, such as WPCode, or create a child theme and copy specific files from the includes folder to place your snippets.
If you’re a Divi user and want to create a child theme, we have a detailed tutorial on the steps you’ll need to take. That said, if you’re a novice user, we highly recommend the snippet plugin route.
If you haven’t signed up for CodeWP, click the Start for Free button.
When the screen refreshes, you can create an account by linking your Facebook profile, GitHub account, or by creating a username and adding your email address.
The CodeWP is rather intuitive. You’ll be able to view your snippets, browse public (verified) snippets submitted by other users, get the latest news, and launch several code generators.
For this tutorial, we’ll be working with the free version of CodeWP, which comes with one interface: WordPress PHP. To unlock the others, you must sign up for a pro license.
To generate your first snippet, click the Generate Code button at the top left of the CodeWP interface.
Next, click the new prompt button to open the text prompt dialog box.
To demonstrate how easy it is to work within CodeWP, we’ll ask it to create a new custom post type for cars and some custom fields we can fill out in the cars post type.
Start by entering the following prompt into the text field:
Create a custom post type called cars and include a taxonomy for vehicle type. Add the following meta fields to the cars custom post type.
integer number meta field called make
integer number meta field called model
integer number meta field called price
integer number meta field called exterior color
integer number meta field called interior color
integer number meta field called seating capacity
integer number meta field called drivetrain
integer number meta field called transmission
integer number meta field called cylinders
integer number meta field called MPG
Finally, click the Generate WP Code button.
After a minute or two, CodeWP will generate your custom PHP code. To use it in WordPress, we’ll need to use the WPCode (or similar) snippet plugin.
Copy the output after the opening PHP tag so we can paste it into WPCode.
Bounce back over to your WordPress admin dashboard. If you still need to install WPCode, do that now. If you need guidance on installing plugins, we have a handy plugin installation guide for you to follow.
Navigate to Code Snippets > + Add Snippet (1). From there, click Add Your Custom Code (New Snippet) (2).
By default, WPCode selects auto-insert and sets the location to everywhere, which is what we want it to do. To make your snippet live, select PHP from the dropdown (1) and paste the PHP snippet into the code preview (2). Next, activate the snippet (3), and save it (4).
Once saved, a new post type appears inside the WordPress admin dashboard.
To ensure things are working correctly, hover over the car in the admin panel and click Add New.
Scroll down until you locate the car meta fields. If they are there, congratulations! If not, you can use CodeWP to help adjust the code accordingly.
WordPress development is rapidly evolving with the integration of AI. Using tools like Elementor AI or CodeWP, you can forego hours of research or expensive web development services. AI tools designed specifically for WordPress can save money and time and teach even the most novice user how to code. Whether you need to add a custom PHP script or take your site’s design to the next level with CSS, AI coding assistants offer invaluable support.
If you’d like to learn more about what you can do with AI for WordPress, check out some of our other AI-related posts:
Featured Image via Leonid studio /Â shutterstock.com
The post How to Code in WordPress with AI appeared first on Elegant Themes Blog.
WordPress users have always wanted the most out of the platform. Adding chatbots to a website is one of the easiest ways to make it more engaging and helpful. And nowadays, creating, training, and rolling out a chatbot is easier than ever. We’ve sifted through the best WordPress chatbots for your websites, comparing their features and costs.
First, let’s look into the different types of chatbots so you can choose exactly what you need. Some chatbots use older technologies that aren’t as easy to use.
Chatbots have transcended their initial role as basic support automation tools, becoming integral to customer engagement strategies. Because they provide intelligent responses, chatbots have changed how companies engage their visitors. Here is how these tools break down into separate categories:
1. Live Chatbots: They greet visitors, determine intent, and direct them to the right human agent. This is helpful when a human support organization wants to save time by having a live chat chatbot route customers to the correct department. It’s more intuitive than a customer self-select (hit “1” to talk to Billing) option and can try to determine urgency level, customer intent, and the correct department.
2. Programmable Chatbots: Programmable chatbots are usually an older type of chatbot. Site owners must create question and answer pairs so that these chatbots provide specific responses to predetermined queries. Because they use a question-and-answer method, they take a lot of time to train, and it’s not uncommon for one to get stumped.
3. GPT and LLM Powered Chatbots: The GPT chatbots and those powered by other Language Models (LLM) are the newest iteration of chatbots. Because of the AI capabilities they are built on top of, their conversation can mimic human interaction. They’re not confined to a script but can provide rich, dynamic interactions. However, they can be trained on specific data to give custom answers instead of what customers could get from something like ChatGPT. These types are usually just referred to as AI chatbots.
Most chatbots fall into the first and third categories. Another popular option is combining an LLM chatbot with a live chat fallback option. These are very powerful and dependable chatbots.
Now that you know about the different types of chatbots on the market, here are our favorites that are easily usable with WordPress websites.
Botsonic is a cutting-edge chatbot builder designed to enhance user engagement on websites. Trusted by thousands of businesses, it offers a seamless way to connect with visitors and provide instant support. The product is known for its user-friendly interface and robust performance, making it a preferred choice among marketers and customer support teams. Additionally, Writesonic, the company behind Botsonic, has seen break-out success with its AI writer and is backed by Y-Combinator.
Botsonic is simple to train using your data. You can upload a file, provide a URL, let it scrape a sitemap, add FAQs, or use the SDK or API to pull in data. This means that Botsonic can speak to your customers about whatever topic it has been trained on, regardless of ChatGPT’s limits.
Best For:
Botsonic is ideal for businesses looking to enhance customer support without needing to hire human support staff. Whether you’re a small business owner or part of a large enterprise, Botsonic can simplify your support system, making it more agile and customer-friendly.
Pricing: Free plan with paid plans starting at $20/mo
Tidio is a full-service customer chat and chatbot platform. Most of their packages focus on constructing traditional chatbots through established workflows. However, with the Tidio+ package, individuals can harness sophisticated AI to create chatbots designed to minimize customer attrition and solve issues. They have also recently launched Lyro AI on all their plans, bringing everyone basic AI features.
Lyro AI by Tidio uses your content and data to make chats as smooth as possible. They can take FAQs and give them to your visitors in a way that matches the flow of the conversation. It also learns from conversations so that it doesn’t offer up information that your visitors aren’t actually searching for. If it gets in trouble and can’t answer, it can ID the chat topic and send the person to a human support person.
Best For:
Tidio shines in chat-focused customer service and sales settings. Because it is seamlessly integrated with WordPress and popular messaging apps, it’s a go-to for lifting customer support and automating support chats.
Pricing: Lyro has free plans with paid chatbot plans starting at $25/mo
HubSpot is a leading CRM platform for helping businesses grow. It is known for being one of the best platforms for marketing automation, with a suite of tools for managing sales, support, and more. The HubSpot Chatbot Builder plugs right into all their other tools to help site owners power their CRM with lead and support data straight from chat. This programmable chatbot takes some time to set up because you will need to build out conversation flows. However, this chatbot will excel at collecting data and integrating it into your CRM and marketing automations.
HubSpot’s seamless integration with its own CRM makes it an ideal solution for businesses already using HubSpot’s suite of tools. The chatbot can pull in CRM personalization details for a better user experience. It also integrates with WordPress and other major CMS platforms.
Best For:
Companies already committed to HubSpot’s CRM will find their basic live chat needs met, although it lacks advanced conversational AI capabilities. This platform offers a two-in-one solution for those seeking a CRM and a chatbot.
Pricing: Free chatbot and CRM with paid plans starting at $20/mo with Hubspot Sales suite
Intercom is a support and help desk platform that has long been a go-to platform for support organizations. It’s what Elegant Themes uses! It is a bit more robust than Botsonic and some of the others on this list because before it added Fin, its AI conversational assistant, it was a live chat software for connecting human agents with website customers. Now, it uses the best of both worlds—allowing AI to handle easier chats and then switch to a human agent when the time is right.
One of the best features of Intercom is Fin. If you’ve used a website that uses it, you know how easy it is for both a customer and the support staff. It answers questions based on a connected knowledge base and other data—and does it well. Once Fin gets out of its depth, it quickly ports the customer to a live agent or adds them to a queue when the support team gets back in. Especially for businesses with large KBs, Fin helps customers get to the right articles and even talks about the articles like a human would.
Best For:
Intercom is ideal for e-commerce businesses, SaaS providers, and companies looking to enhance customer engagement. It’s perfect for those who want to provide a custom touch without losing the efficiency of automation. If you want to build lasting relationships with your customers, Intercom is the tool for you.
Pricing: Pricing starts at $74/mo with Fin AI charges added on top
Next up, DocsBot AI is another sophisticated and trainable AI solution that transforms traditional documentation into chatbots. It is excellent for customer support, but DocsBot AI tries to make the specialized knowledge you give it even more useful with creative use cases.
What sets DocsBot AI apart from its competitors is can also be used to generate AI content. As an AI writer, you can train it to support and write marketing materials while retaining your exact voice and brand identity. It considers the full scope of your business, ensuring trustworthy content generation. This feature provides confidence that the AI understands your brand when acting as a help bot and as an AI writer.
Best For:
DocsBot AI is ideally suited for businesses of all sizes, from startups to established enterprises, that seek to automate customer interactions and enhance content creation. It’s a strategic investment for those looking to streamline support, foster internal collaboration, and leverage AI for creative endeavors.
Pricing: Free plans with paid ones starting at $19/mo
Chatbase is another trainable AI chatbot builder that empowers businesses to create customized chatbots. Known for its bare-bones simplicity, Chatbase allows users to connect their data sources and create a ChatGPT-like chatbot tailored to their specific needs. It does not have human live chat support but is a heavy hitter in conversational AI support.
Chatbase’s apart is its ability to train ChatGPT on your data, which is about as easy as you could ask for it to be. By simply uploading a document or adding a link to your website, you can create a chatbot that can answer any question about the content. This feature enhances the user experience and provides a unique way to engage with your audience.
Best For:
Chatbase is ideal for businesses looking to enhance their online presence with an interactive chatbot. From collecting leads to providing custom responses, Chatbase is perfect for companies leveraging AI technology to create a more engaging and responsive website.
Pricing: Free plan available with paid plans starting at $19/mo
Botsify is another excellent choice of website Chatbot that can be added to WordPress. Known as being user-friendly and reliable, Botsify has come to be trusted by many businesses. It’s a platform that allows users to create intelligent chatbots without diving deep into coding, making it accessible to a broad audience.
Botsify’s integrations set it apart from other similarly priced options on the market. This chatbot can pull information from dozens of sources to speak confidently. A great example would be linking a WooCommerce store to Botsify and watching as it answers customer questions about product variations, prices, and return policies. Each integration unlocks synergies between your most used business products and customer interactions.
Best For:
Botsify is ideal for small to medium-sized businesses looking to enhance customer engagement without investing in wide development. It’s perfect for providing real-time support, gathering customer insights, or automating repetitive tasks. Unlike other platforms, Botsify offers a unique blend of simplicity and functionality, making it a standout choice for non-tech-savvy users.
Pricing: Paid plans start at $49/mo
Chatbot.com specializes in AI-driven chat solutions aimed at elevating customer service through a web-based chat interface. The platform empowers businesses to develop their own chatbots, lessening the reliance on an entirely human support staff. Its versatile integration options blend into workflows you already have and various communication platforms and social networks.
Best For:
ChatBot is perfect for companies seeking a comprehensive digital assistant for sales and customer care. It works smoothly with ChatBot.com’s sister brands—LiveChat.com and HelpDesk.com—providing a whole enterprise support framework. For businesses on the cusp of significant growth, the ChatBot.com suite is a worthy choice.
Pricing: Starting at $52/mo
With a lot of chatbots on the market that work with WordPress websites, it can be hard to narrow them down. Here is an overview of the best WordPress solutions.
Price can be a significant factor in picking a chatbot solution, especially if this is your first venture into including one on your website. Here’s how each of our chatbots stack up on price.
| Rank | WordPress Chatbots | Starting Price | Free Option | |
|---|---|---|---|---|
| 🥇 | Botsonic | $20/mo | âœ”ï¸ | Get |
| 🥈 | Tidio | $25/mo | âœ”ï¸ | Get |
| 🥉 | Hubspot | $20/mo | âœ”ï¸ | Get |
| 4 | Intercom | $74/mo | ⌠| Get |
| 5 | DocsBot AI | $19/mo | âœ”ï¸ | Get |
| 6 | Chatbase | $19/mo | âœ”ï¸ | Get |
| 7 | Botsify | $49/mo | ⌠| Get |
| 8 | ChatBot.com | $52/mo | ⌠| Get |
Our top choice, Botsonic, and a couple of others have free options for you to try out, while the other two also have free trials.
As we’ve seen in detail, there are different types of chatbots, and choosing a particular solution might come down to the features each offers. Here’s a look at the features of our top three options.
| 🥇Botsonic | 🥈 Tidio | 🥉 Hubspot | |
|---|---|---|---|
| Starting Price | $20/mo | $25/mo | $20/mo |
| GPT-4 Powered Chatbot | âœ”ï¸ | ⌠| ⌠|
| Real-time Analytics and Reporting | âœ”ï¸ | âœ”ï¸ | âœ”ï¸ |
| Live Agent Routing | âœ”ï¸ | âœ”ï¸ | âœ”ï¸ |
| Help Desk and Documentation System | ⌠| âœ”ï¸ | âœ”ï¸ |
| AI Content Writing | ✔ï¸* | ⌠| ⌠|
| Integration with Other Platforms | âœ”ï¸ | âœ”ï¸ | âœ”ï¸ |
| Train on Private Data | âœ”ï¸ | âœ”ï¸ | ⌠|
| Internal Functions for Team | âœ”ï¸ | âœ”ï¸ | âœ”ï¸ |
| Get Botsonic | Get Intercom | Get Hubspot AI | |
| *Botsonic comes with Writesonic’s AI writer until they separate the product, which has been announced. | |||
Chatbots are slowly becoming more normal to use. They’re used at the beginning of support interactions to help live agents navigate the simplest queries and gather information before speaking with a human. Depending on what you need from a chatbot, there are plenty of options on the market.
Our favorite is Botsonic, which provides many features, including live chat workflows and GPT 4. Tidio is our next top pick because of its cutting-edge conversational AI for engaging new customers and landing more sales. It also has a fallback to connect with live agents and integrates with popular messaging apps.
Whatever you choose, you will give your site visitors a more personalized experience that answers their questions.
What do you think about using chatbots on your websites? Share your thoughts and which chatbots you’ve tried out below!
Article thumbnail image by Thx4Stock / shutterstock.com.
The post 8 Best WordPress Chatbots for your Website in 2023 appeared first on Elegant Themes Blog.