Style the Product Content on the WooCommerce Single template
Style
Alignment: Align the product content to the left, right, center, or justifiedText Color: Choose the color of the product content of the textTypography: Set the typography options for the product content text
The error message ERR_EMPTY_RESPONSE can happen with some servers.
To fix this, please switch the Editor Loader Method as shown below:
* Switch Editor Loader Method is useful in solving the 「err_content_decoding_failed」 and err_empty_response」 issues that sometimes occur. Enabling this option helps users running sites on servers with low resources which have difficulty reading long JSON code. When enabled, the tool splits the lines so that these servers can read the JSON code without issues. Switching to this method won』t negatively affect performance. Instead, it will likely improve performance.
Control the style and layout of your WooCommerce Archive Title
Content
Title: Automatically dynamically generatedLink: Enter the URL for the item』s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.Size: Choose from Default, Small, Medium, Large, XL, XXLHTML Tag: Select the HTML tag to use for the Title, from H1 to H6, or div, span, or pAlignment: Align the Title to the left, right, center, or justified
Style
Text Color: Choose the color of the textTypography: Change the typography options for the textText Shadow: Add a shadow and blur to the textBlend Mode: Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc. View Blend Mode demo
Tip: Want to hide the Category name? Click the title to open the Settings options. Slide Include Context to No.
If you see the error message 「Undefined」 when you try to add a template:
Upgrade your PHP version to PHP7 (backup your website before)In some cases, the latest version of PHP may cause undefined errors. Although staying up to date with PHP versions is often a good idea, it may cause problems for edge cases. Downgrade to a PHP version one version lower than the latest if this occurs.Ask your hosting company to increase the timeout value of your serverAsk them also to check the database encodingVerify that it is not due to a plugin conflict by deactivating all your plugins besides Elementor and Elementor Pro. If this solves the issue, reactivate them one by one to find the culprit.Check if it is not due to a conflict with a browser add-on by editing in incognito mode with your browser.
Elementor』s Breadcrumbs Widget works with the popular Yoast SEO Plugin. So to use this widget, INSTALL YOAST SEO.
Content
Alignment: Set the Alignment.HTML Tag: Choose an HTML Tag
Note: Additional settings are available in the Yoast SEO Breadcrumbs Panel
Style
Typography: Click the icon to design the typography using Elementor』s design optionsText Color: Set the color for the textLink Color: Set the color for the link. Set it for Hover as well
The most common issues can often be solved using one of our troubleshooting guides.
How to Fix the 『Preview Could Not Be Loaded』 ErrorMy changes do not appear online, what can I do?Can』t Edit with ElementorFatal error after updating or installing Elementor or Elementor ProThe Content Area Was Not Found in Your PageThe Publish / Update Button Does Not Work
Sometimes, because of using Negative Margins, Z-Index, or Absolute Positioning, a section or the section』s handle can become hidden and inaccessible, making it seemingly impossible to edit it. This is because either another section overlaps it, or because it gets hidden behind the header that comes from the theme.
Elementor』s Navigator enables you to easily reach and edit these hidden section handles.
Navigator』s tree panel provides easy access to every element on the editor with just one click. Now you can edit and move elements that have been hidden by Z-Index, negative margins, and absolute positions.
Learn more about how this wonderful tool puts you in complete control over the elements on the page.
A Global Widget gives you full control over a specific widget that is displayed in multiple places on your site. Editing it in one place will instantly update the rest.
For example, let』s say you』ve edited and designed a Testimonial widget on one page, and you now want to use your creation on many other pages on your site. Simply save it as a Global Widget and then drag your new widget onto any page. You can then edit all of them at once by editing the global widget.
Create a Global Widget
Right Click the widget』s handle and click on Save as a GlobalName your new global template and click the Save button
Edit a Global Widget
Once the widget is saved as a global widget it is instantly surrounded by a yellow border instead of the standard blue border. In addition, in the panel, all of the saved global widgets are displayed as a two column widget list.
To edit the global widget, Right Click the widget』s handle
You』ll see the message 「 This is a global widget and is now locked」
Clicking Edit global widget allows editing the global widget. Any changes made here will instantly update all the places in which the global widget is placed on the siteClicking Unlink from global will unlink the widget from the rest of the global widgets, and let you edit only the specific widget, without affecting all other global widgets.
Insert a Global Widget
There is a number of ways to insert a global widget to other places on your site:
Elementor Dashboard:
On the new page click Global, and drag a global widget to your page.
WordPress widgets area:
Go to Appearance > WidgetsAdd the Elementor Library Widget to the area you want (footer, sidebar, etc.)Click the dropdown and pick the template or global widget you want to use.
Shortcode
Go to Templates > Saved Templates > Global Widget.Copy the ShortcodePaste it in any area that supports shortcodes.
How to delete the Global Widget
Go to
Templates > Saved Templates
and delete the widget.
Important! Notice that deleting a Global Widget will delete it from everywhere.
Display a grid of WooCommerce Product Categories anywhere on your site.
Content
Layout
Columns: Set the exact number of columns to display, from 1 to 12Categories Count: Select the number of categories to display
Query
Source: Select the source from which to display categories, choosing from All, Manual Selection, By Parent, or Current Subcategories. If Manual Selection is chosen, manually select which categories to display. If 「By Parent」 is chosen, select from Only Top Level, or select an individual category from the dropdown list.Hide Empty: Set to Yes to categories with no products within themOrder By: Set the order in which the categories will be displayed. Options include Name, Slug, Description, or CountOrder: Select to display categories in ASC or DESC (Ascending or Descending) order
Style
Columns Gap: Set the exact gap between the columnsRows Gap: Set the exact gap between the rowsAlignment: Align the products data to the left, right, or center
Image
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the radius to control corner roundness of the borderSpacing: Adjust the amount of space between the images and their data
Title
Color: Choose the Title colorTypography: Set the typography options for the Title text
Count
Color: Choose the color for the CountTypography: Set typography options for the Count
Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme』s settings.
Since our launch, we have been known for our frequent feature release, and plan to keep working hard to deliver new and promising features & templates almost every week.
Follow our blog to see the latest release: https://elementor.com/blog
