WooCommerce – Astra https://wpastra.com Fast, Lightweight & Customizable WordPress Theme for Any Website Wed, 29 Dec 2021 12:34:55 +0000 en-US hourly 1 https://wordpress.org/?v=5.9.3 https://wpastra.com/wp-content/uploads/2020/01/favicon-astra2x.png WooCommerce – Astra https://wpastra.com 32 32 How to Add WooCommerce Mini Cart in Header? (Old Astra Header) https://wpastra.com/docs/add-woocommerce-mini-cart-to-header/ Sun, 24 Jun 2018 18:30:00 +0000 https://wpastra.com/?post_type=docs&p=28266 Customize > Header > Primary Menu > Last Item in Menu and choose WooCommerce. It will …

How to Add WooCommerce Mini Cart in Header? (Old Astra Header) Read More »

]]> When using the old Astra header, you can add WooCommerce mini cart to the primary header with a few simple settings.

Make sure you have activated the WooCommerce plugin.

To find the setting, from the WordPress dashboard navigate to Appearance > Customize > Header > Primary Menu > Last Item in Menu and choose WooCommerce.

It will display a WooCommerce cart icon at the end of the primary menu.

Add WooCommerce Mini Cart, Astra 3.0+

Note:

This doc is valid only if you are using the Astra Theme with the old header options. If you switched to Header and Footer Builder, please visit the related docs category.

You can also add the WooCommerce Mini Cart to the Above/Below Header with Astra Pro. Astra Pro’s WooCommerce module provides options to change the cart icon, add styling to it, display cart title and total. Please refer to this document to start working with the WooCommerce module.

These are premium features available with the Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Like the primary header, you can add a mini cart to Above Header and Below Header. Make sure Header Sections addon is activated.

To find the setting, from WordPress dashboard navigate to Appearance > Customize > Header > Above Header > Section ( 1/2 ) and choose WooCommerce.

Above Header - WooCommerce Mini Cart, Astra 3.0+

Apart from the header, you might need to display a mini cart icon anywhere on the site. The WooCommerce module provides WooCommerce Mini Cart Shortcode, which allows you to display the mini cart icon anywhere you want:

[astra_woo_mini_cart] 

Note:

The shortcode will only work if you have Astra Pro installed and activated, with also the WooCommerce module activated from Astra Pro Options (Dashbaorad > Appearance > Astra Options).

Refer to the article here for more information.

]]> WooCommerce Integration Overview in Free Astra Theme https://wpastra.com/docs/woocommerce-integration-overview/ Sun, 07 Jan 2018 18:30:00 +0000 https://wpastra.com/?post_type=docs&p=23733 WooCommerce Integration Overview in Free Astra Theme Read More »

]]> Astra integrates nicely with WooCommerce. All WooCommerce elements automatically adapt to the rest of your Astra powered website and take colors, fonts out of the box from the theme customizer settings. That way, you can have your shop up and running immediately with minimum setup. Let’s take a look!

Note: We provide more styling options in dedicated modules of Astra Pro Addon plugin. Learn more about the WooCommerce module of Astra Pro Addon.

Astra Pro Addon extends the WooCommerce options with WooCommerce Module.

WooCommerce Settings

Please be sure you have WooCommerce plugin installed. Once you have it installed and activated, you will find a dedicated tab for WooCommerce under the Customizer.

Note: After Astra 2.0, we have combined Astra WooCommerce settings with WooCommerce Default settings in the Customizer. Now you will find the combined settings in the first panel of WooCommerce.

WooCommerce, Astra 3.0+

WooCommerce Tab

Under the WooCommerce tab, you will find further options categorized into further tabs.

Note: Now we have brought all the WooCommerce settings under a single WooCommerce tab. While, you will find the Astra settings with the WooCommerce settings in the pointed-out tabs.

WooCommerce Settings, Astra 3.0+

Product Catalog

Here you can control how your Shop page looks like. These are available settings:

  • Shop Archive Content Width: You can choose the default or custom option. If you select the custom setting you can set the Archive Content Width.
  • Shop Columns: The number of columns for each device
  • Products Per Page: Number of Products you want to display
  • Shop Product Structure: Structure of products where you can move elements or disable them.
WooCommerce Product Catalog, Astra 3.0+
WooCommerce Product Structure, Astra 3.0+

Single Product Page

Enable or disable breadcrumbs from appearing in this section.

WooCommerce Breadcrumbs, Astra 3.0+

Cart Page

Should you wish to display cross-sell products, you can enable “Enable Cross-sells” checkbox.

WooCommerce Cart, Astra 3.0+

Product Images

You can set Main Image width and Thumbnail Image Width using Astra along with WooCommerce settings which provides the Thumbnail Cropping options.

Cart Icon in Menu:
You can display the cart icon in the menu by navigating to Appearance > Customize > Header > Primary Menu option and enabling WooCommerce as the Last Item in Menu.

WooCommerce Mini Cart, Astra 3.0+

Container Setting

You can control container layout independently on WooCommerce pages at Appearance > Customize > Global > Container. The option you set here will affect WooCommerce Shop, Single Product, Cart, and Checkout Pages.
Please note, you can override container settings for individual pages through meta settings.

WooCommece Layout, Astra 3.0+

Sidebar

You can control sidebars independently on WooCommerce pages such as Shop, Cart, and Checkout. To set up sidebars navigate to Appearance > Customize > Sidebar.
For further control on Single Products, we have provided its own sidebar setting so you can have a totally different sidebar there.
You can add widgets in any sidebar from Customizer.

Sidebars on WooCommerce Pages, Astra 3.0+
WooCommerce Product Sidebar, Astra 3.0+

Again, please note, you can override container setting for individual pages through meta settings.

Base Color & Typography

As mentioned at the beginning of the article, all WooCommerce elements automatically adapt with the rest of your Astra powered website and take colors, fonts out of the box from the theme customizer settings.

WooCommerce Typography, Astra 3.0+
WooCommerce Colors, Astra 3.0+

We provide more styling options in dedicated modules of Astra Pro Addon plugin. Learn more about the WooCommerce module of Astra Pro Addon.

Related Documents:

]]>