One place for hosting & domains

      Awesome

      Использование Font Awesome 5 с React


      Введение

      Font Awesome — инструментарий для сайтов, предоставляющий иконки и логотипы для социальных сетей. React — библиотека программирования, используемая для создания пользовательских интерфейсов. Хотя команда Font Awesome выпустила компонент React для поддержки интеграции, разработчикам следует знать базовые принципы работы и структуру Font Awesome 5. В этом учебном модуле вы научитесь использовать компонент React Font Awesome.

      Сайт Font Awesome с иконками

      Предварительные требования

      Для этого учебного модуля не потребуется писать код, но если вы захотите поэкспериментировать с некоторыми примерами, вам потребуется следующее:

      Шаг 1 — Использование Font Awesome

      Команда Font Awesome создала компонент React для их совместного использования. С этой библиотекой вы сможете следовать указаниям учебного модуля, выбрав свою иконку.

      В этом примере мы будем использовать иконку home и сделаем все в файле App.js:

      src/App.js

      import React from "react";
      import { render } from "react-dom";
      
      // get our fontawesome imports
      import { faHome } from "@fortawesome/free-solid-svg-icons";
      import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
      
      // create our App
      const App = () => (
        <div>
          <FontAwesomeIcon icon={faHome} />
        </div>
      );
      
      // render to #root
      render(<App />, document.getElementById("root"));
      

      Теперь в вашем приложении имеется маленькая иконка home. Обратите внимание, что в этом коде выбирается только иконка home, так что размер нашего пакета увеличивается только на одну иконку.

      песочница кода с иконкой home

      Теперь Font Awesome сделает так, что этот компонент заменит себя версией SVG этой иконки после монтирования компонента.

      Шаг 2 — Выбор иконок

      Прежде чем устанавливать и использовать иконки, важно понимать структуру библиотек Font Awesome. Поскольку иконок много, команда решила разделить их на несколько пакетов.

      При выборе желаемых иконок рекомендуется посетить страницу иконок Font Awesome, чтобы ознакомиться с доступными вариантами. В левой части страницы вам будут доступны для выбора различные фильтры. Эти фильтры очень важны, потому что они будут указывать, из какого пакета нужно импортировать вашу иконку.

      В примере выше мы взяли иконку home из пакета @fortawesome/free-solid-svg-icons.

      Определение пакета, к которому принадлежит иконка

      Вы можете посмотреть фильтры слева и определить, к какому пакету принадлежит иконка. Также вы можете нажать на иконку и посмотреть, к какому пакету она принадлежит.

      Когда вы знаете, к какому пакету принадлежит шрифт, важно помнить обозначение этого пакета из трех символов:

      • Сплошной стиль — fas
      • Обычный стиль — far
      • Легкий стиль — fal
      • Двухтонный стиль — fad

      Вы можете использовать страницу иконок для поиска определенного типа:

      страница иконок с несколькими названиями пакетов слева

      Использование иконок из конкретных пакетов

      При просмотре страницы иконок Font Awesome вы должны увидеть, что обычно есть несколько версий одной и той же иконки. Возьмем в качестве примера иконку boxing-glove:

      три разные версии иконки boxing glove

      Чтобы использовать определенную иконку, необходимо изменить <FontAwesomeIcon>. Далее показаны несколько типов одного значка из разных пакетов. К ним относятся сокращения из трех букв, о которых мы уже говорили.

      Примечание. Следующие примеры не будут работать, пока мы не создадим библиотеку иконок с несколькими разделами.

      Приведем пример сплошной версии.

      <FontAwesomeIcon icon={['fas', 'code']} />
      

      Если тип не указан, по умолчанию используется сплошная версия.

      <FontAwesomeIcon icon={faCode} />
      

      И облегченная версия с использованием fal:

      <FontAwesomeIcon icon={['fal', 'code']} />;
      

      Нам нужно было переключить запись icon, чтобы это был массив, а не простая строка.

      Шаг 3 — Установка Font Awesome

      Поскольку существует несколько версий иконки, несколько пакетов и бесплатные и профессиональные пакеты, для установки всех этих версий потребуется более одного пакета npm. Возможно, вам потребуется установить несколько пакетов, а затем выбрать иконки, которые вам нужны.

      Для целей этой статьи мы установим все, чтобы продемонстрировать процедуру установки нескольких пакетов.

      Выполните следующую команду для установки базовых пакетов:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

      Выполните следующие команды для установки обычных иконок:

      • # regular icons
      • npm i -S @fortawesome/free-regular-svg-icons
      • npm i -S @fortawesome/pro-regular-svg-icons

      Эти команды установят сплошные иконки:

      • # solid icons
      • npm i -S @fortawesome/free-solid-svg-icons
      • npm i -S @fortawesome/pro-solid-svg-icons

      Используйте эту команду для облегченных иконок:

      • # light icons
      • npm i -S @fortawesome/pro-light-svg-icons

      Эта команда установит двухтонные иконки:

      • # duotone icons
      • npm i -S @fortawesome/pro-duotone-svg-icons

      Наконец, эта команда установит иконки бренда:

      • # brand icons
      • npm i -S @fortawesome/free-brands-svg-icons

      Если вы предпочитаете установить все за один раз, вы можете использовать эту команду для установки бесплатных наборов иконок:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

      Если у вас имеется профессиональная учетная запись Font Awesome, вы можете использовать следующую команду для установки всех иконок:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

      Мы установили пакеты, но еще не использовали их в своем приложении и не добавили их в наши комплекты приложений. На следующем шаге мы посмотрим, как это сделать.

      Шаг 4 — Создание библиотеки иконок

      Импортировать нужную иконку в несколько файлов может быть непросто. Допустим, вы используете логотип Twitter в нескольких местах и не хотите прописывать его несколько раз.

      Чтобы импортировать все в одно место, вместо импорта каждой иконки в каждый отдельный файл мы создадим библиотеку Font Awesome.

      Создайте файл fontawesome.js в папке src и импортируйте его в файл index.js. Вы можете свободно добавлять этот файл, если у компонентов, где вы хотите использовать иконки, есть к нему доступ (являются дочерними компонентами). Вы можете сделать это непосредственно в файле index.js или App.js. Однако лучше вынести его в отдельный файл, поскольку он может оказаться большим:

      src/fontawesome.js

      // import the library
      import { library } from '@fortawesome/fontawesome-svg-core';
      
      // import your icons
      import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
      import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';
      
      library.add(
        faMoneyBill,
        faCode,
        faHighlighter
        // more icons go here
      );
      

      Если вы использовали для этого отдельный файл, нужно выполнить импорт в index.js:

      src/index.js

      import React from 'react';
      import { render } from 'react-dom';
      
      // import your fontawesome library
      import './fontawesome';
      
      render(<App />, document.getElementById('root'));
      

      Импорт пакета иконок целиком

      Весь пакет целиком импортировать не рекомендуется, поскольку так в приложение будут импортированы абсолютно все иконки, и итоговый размер может оказаться большим. Разумеется, если вам нужно импортировать пакет целиком, вы можете это сделать.

      Если взять этот пример, представьте, что вам нужны все иконки брендов в пакете @fortawesome/free-brands-svg-icons. Для импорта всего пакета целиком потребуется следующее:

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { fab } from '@fortawesome/free-brands-svg-icons';
      
      library.add(fab);
      

      fab отражает весь пакет иконок брендов.

      Импорт иконок по отдельности

      Рекомендуемый способ использовать иконки Font Awesome — импортировать их по одной так, чтобы окончательный размер комплекта был минимальным, и вы импортировали только то, что вам требуется.

      Вы можете создать библиотеку из нескольких иконок из разных пакетов, например:

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      
      import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
      import { faImages } from '@fortawesome/pro-solid-svg-icons';
      import {
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      } from '@fortawesome/free-brands-svg-icons';
      
      library.add(
        faUserGraduate,
        faImages,
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      );
      

      Импорт одной иконки из нескольких стилей

      Если вам нужны все типы иконки boxing-glove для пакетов fal, far и fas, вы можете импортировать их все под другим именем, а затем добавить их.

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveRegular
      } from '@fortawesome/pro-regular-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveSolid
      } from '@fortawesome/pro-solid-svg-icons';
      
      library.add(
          faBoxingGlove,
          faBoxingGloveRegular,
          faBoxingGloveSolid
      );
      

      Затем вы сможете использовать их, применяя разные префиксы:

      <FontAwesomeIcon icon={['fal', 'boxing-glove']} />
      <FontAwesomeIcon icon={['far', 'boxing-glove']} />
      <FontAwesomeIcon icon={['fas', 'boxing-glove']} />
      

      Шаг 5 — Использование иконок

      Теперь вы установили все необходимое, добавили свои иконки в библиотеку Font Awesome и можете использовать их и назначать им размеры. В этом учебном модуле мы будем использовать облегченный пакет (fal).

      В первом примере будет использоваться нормальный размер:

      <FontAwesomeIcon icon={['fal', 'code']} />
      

      Во втором примере можно использовать имена размеров с сокращениями для малого (sm), среднего (md), большого (lg) и очень большого (xl):

      <FontAwesomeIcon icon={['fal', 'code']} size="sm" />
      <FontAwesomeIcon icon={['fal', 'code']} size="md" />
      <FontAwesomeIcon icon={['fal', 'code']} size="lg" />
      <FontAwesomeIcon icon={['fal', 'code']} size="xl" />
      

      Третий пример предусматривает нумерацию размеров до 6:

      <FontAwesomeIcon icon={['fal', 'code']} size="2x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="3x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="4x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="5x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="6x" />
      

      При использовании нумерации размеров можно использовать десятичные дроби, чтобы подобрать идеальный размер:

      <FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />
      

      Font Awesome применяет стили к используемым SVG, используя цвет текста CSS. Если вы поместите тег <p>, где будет размещена эта иконка, цвет иконки будет соответствовать цвету абзаца:

      <FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />
      

      В Font Awesome также имеется функция power transforms, позволяющая объединить разные трансформации в одной строке:

      <FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />
      

      Вы можете использовать любую из трансформаций с сайта Font Awesome. Их можно использовать для перемещения иконок вверх, вниз, влево или вправо, чтобы добиться идеального позиционирования рядом с текстом или внутри кнопок.

      Иконки с фиксированной шириной

      В случае использования иконок в месте, где они должны быть единообразными и иметь одинаковую ширину. Font Awesome позволяет использовать опцию fixedWidth. Допустим, вам нужна фиксированная ширина для выпадающего меню навигации:

      Шотландский сайт с выпадающим меню и выделенной надписью «Курсы»

      <FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />
      

      Вращающиеся иконки

      Вращение часто используется для кнопок форм во время обработки этих форм. Вы можете использовать иконку спиннера, чтобы добиться привлекательного эффекта:

      <FontAwesomeIcon icon={['fal', 'spinner']} spin />
      

      Вы можете использовать опцию spin с чем угодно!

      <FontAwesomeIcon icon={['fal', 'code']} spin />
      

      Расширенная возможность: маскировка иконок

      Font Awesome позволяет комбинировать две иконки для получения эффекта маскировки. Мы определяем нормальную иконку, а затем используем опцию mask для определения второй иконки, расположенной поверх нее. Размеры первой иконки ограничиваются маскирующей иконкой.

      В этом примере мы создали фильтры тегов, используя маскировку:

      Фильтры тегов с Font Awesome

      <FontAwesomeIcon
        icon={['fab', 'javascript']}
        mask={['fas', 'circle']}
        transform="grow-7 left-1.5 up-2.2"
        fixedWidth
      />
      

      Обратите внимание, что вы можете соединить цепочки опций transform так, чтобы внутренняя иконка помещалась внутри маскирующей иконки.

      Мы даже можем окрасить и изменить фоновый логотип с помощью Font Awesome:

      Теги снова фильтруются, но теперь с синим фоном

      Шаг 6 — Использование react-fontawesome и иконок вне React

      Если ваш сайт не является одностраничным приложением (SPA), а вы используете традиционный сайт с добавлением React. Чтобы избежать импортирования основной библиотеки SVG/JS и библиотеки react-fontawesome, в Font Awesome имеется возможность использовать библиотеки React для слежения за иконками вне компонентов React.

      Если вы используете <i class="fas fa-stroopwafel"></i>, мы можем использовать Font Awesome для слежения и обновления с помощью следующего кода:

      import { dom } from '@fortawesome/fontawesome-svg-core'
      
      dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver
      

      MutationObserver — это веб-технология, позволяющая производительно отслеживать изменения DOM. Более подробную информацию об этой методике можно найти в документации по React Font Awesome.

      Заключение

      Font Awesome и React отлично сочетаются, но при их совместном использовании возникает необходимость использования нескольких пакетов и разнообразных комбинаций. В этом учебном модуле мы рассмотрели несколько способов совместного использования Font Awesome и React.



      Source link

      6 Awesome CSS Extensions for VS Code


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. With tons of developers creating extensions, the functionality is literally endless! Here are some of the best extensions in VS Code for writing CSS.

      Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development!

      HTML CSS Support


      HTML CSS Support (and the next extension listed) provides intellisense in your HTML files based on the CSS that is included in your project or referenced remotely. Here’s a full list of features.

      • Class attribute completion

      • Id attribute completion

      • Supports Zen Coding completion for class and id attributes

      • Scans workspace folder for css and scss files

      • Supports remote css files

      One thing that really stands out about this one is that you can specify remote CSS files to cache as well. You can do this by adding the following setting. This example is refering the Bootstrap 4 CSS file.

      "css.remoteStyleSheets": [
        "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
      ]
      

      Intellisense for CSS Class Names

      Intellisense for CSS Class Names provides similar functionality to the extension above. This one will also automatically pull classes from CSS referenced in your HTML files. This class definitions will also be available via intellisense when using Emmet as well!

      At any point, you can trigger a re-cache of the classes from your CSS files by opening up the Command Palette.

      Autoprefixer


      Having to prefix certain CSS properties to ensure browser support can be an extreme hassle. If it weren’t for the workflows already configured with Create React App, Angular CLI, etc. I would completely forget to add the vendor prefixes.

      Autoprefixer will automatically add vendor prefixes to make sure your app looks as good as possible in different browsers. It’s crazy simple. Open the Command Palette and call “Autoprefixer CSS”.

      CSS Peek

      If you’re anything like me, I hate having to toggle over to my .css file to check the properties attached to a class or id. With CSS Peek, you can view a hover image of your CSS from within you HTML file.

      This extension also turns class names and ids into a hyper link that takes you directly to that class or id definition in your CSS!

      Prettier – Code Formatter

      Never worry about formatting again. Setup Prettier once, and it takes care of the rest!

      Prettier – Code Formatter is incredibly popular for auto-formatting your JavaScript, but did you know it autoformats CSS as well? Well, it does, and it’s awesome!

      Here’s a before (with terrible format).

      …and after (with BEAUTIFUL formatting)!


      You can set this up to run on save automatically or manually if you choose.

      Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

      Sure, not every project uses Bootstrap or Font Awesome, but a ton of them do. That’s why I figured it was worth sharing this extension which provides intellisense for Bootstrap 4, Font Awesome 4, and Font Awesome 5.

      There are so many classes in Bootstrap that it’s impossible to memorize them all. Same with working with Font Awesome. I have to look up the syntax every time I want to add an icon, but not anymore!

      To activate the snippets for Bootstrap use “B4”.

      and “FA5” for Font Awesome 5.

      Recap

      There you go, some of the best CSS extensions for Visual Studio Code. If you think we’ve missed anything, comment below and share your favorites!



      Source link

      How to Build an Awesome WooCommerce Store with OceanWP


      Eye appeal is buy appeal. This is an old adage that rings just as true for online stores as it does for physical ones. In order to remain competitive, it’s crucial that your site displays your products in a gorgeous, well-structured fashion on every device. Equally important is ensuring that you can easily manage customer information and payments on the back end.

      Building a website with the OceanWP WooCommerce theme is a perfect way to achieve both of these goals in WordPress. Whatever the nature of your online business, OceanWP will take the guesswork and hassle out of showcasing your products for maximum effect. Better still, since OceanWP offers full integration with the WooCommerce plugin, you can configure, manage, and promote your e-commerce site with ease.

      In this article, we’ll introduce WooCommerce, and discuss why it’s the perfect option for your online store. Then we’ll walk you through how to create a WooCommerce-powered website using OceanWP, and show you a few extensions you can implement to make your store even better. Let’s dive in!

      An Introduction to WooCommerce

      WooCommerce makes setting up your online store a quick, easy, and efficient process.

      WooCommerce is a highly customizable plugin that enables you to turn your WordPress website into an online storefront. It helps you quickly and easily create a catalog of your products, comprised of product descriptions with accompanying images and information. After that, you can let visitors make purchases using several popular payment gateways, including Stripe and PayPal.

      Whether you wish to sell physical products, digital items, services, or some combination of the three, WooCommerce can accommodate your specific needs. It is extremely versatile, and makes the process of organizing products, managing payments, and gathering reports easy (even for e-commerce beginners). There’s a reason why this is the number one e-commerce plugin for WordPress.

      Some of the other key features of WooCommerce include:

      • The ability to display product variations (i.e. different clothing sizes and colors, various software packages, etc).
      • Automatic tax calculations based on country and state rates.
      • Options to display customer ratings and reviews.
      • Functionality that aids in affiliate product promotion.

      Although WooCommerce contains all the back-end functionality you will need to build and run your e-commerce store, you’ll still need a way to showcase your products for maximum effect. That’s where the OceanWP WooCommerce theme comes into play. By combining this versatile theme with WooCommerce, you can drastically improve your chances of making your online business a resounding success.

      Your Store Deserves WooCommerce Hosting

      Sell anything, anywhere, anytime on the world’s biggest e-commerce platform.

      How to Build an Awesome WooCommerce-Powered Store with OceanWP (In 6 Steps)

      OceanWP is a fast, responsive, and highly-customizable WordPress theme. What’s more, it contains numerous templates to help you design a unique e-commerce site. Let’s talk about how to get started!

      Step 1: Install OceanWP and Import Your Chosen Demo

      OceanWP free and premium demos.
      OceanWP offers a wide array of free and premium demos to choose from.

      The first thing you’ll need to do is install and activate the OceanWP theme. It includes a number of demos you can use as the basis for your store. You can pick out one of the e-commerce demos, and then customize it to suit your exact needs.

      To do this, you will first need to install and activate the Ocean Extra plugin. This tool will add all the free demos to your site. After Ocean Extra is installed, you’ll be prompted to set up OceanWP via a simple wizard. Then you can select whatever demo you like. If you’re interested in one of the premium demos, on the other hand, you can access it by purchasing the OceanWP Core Extensions Bundle.

      Step 2: Download and Install WooCommerce

      The WooCommerce setup wizard helps you lay the groundwork for your e-commerce site in minutes.

      Once your theme is activated, you’ll need to set up the WooCommerce plugin if you haven’t already done so.

      You will be directed to the WooCommerce setup wizard, which we recommend going through. It will help you set up all the basic details of your e-commerce business, including your store’s address, the currency you’ll use, and the kinds of products you’ll be selling. You also have the option to choose the units that will be used to measure your products, and to determine how shipping will work. Finally, you also have the choice to integrate WooCommerce with the Jetpack plugin, giving you access to a variety of useful features.

      Once you’ve completed the wizard, you should see a WooCommerce option in the main menu of your WordPress dashboard. You’re now ready to start adding products!

      Step 3: Add Your Products Using WooCommerce

      The OceanWP theme harmonizes perfectly with WooCommerce, letting you build informative and attractive product descriptions.

      By navigating to Products > Add New, you can now start adding wares to your e-commerce store. This intuitive process involves naming the item, writing up a product description, and uploading the corresponding image for the product. You also have the option to add an image gallery to each product. This can be particularly useful if you offer variations on a single item (i.e. a shirt with the same design that’s available in different colors).

      After you’ve input the basic elements above, you can use the WooCommerce Product Data window below the WordPress editor to add in the crucial e-commerce details. This includes the product’s price and tax status, as well as the shipping details (weight, dimensions, post class, etc).

      In addition, you have the option to link additional products to the product description (for upselling or cross-selling applications), and to specify customizable attributes (such as clothing sizes and colors).

      Once you have finished adding and customizing your product pages, you can further enhance them with some of the extra features offered by OceanWP.

      Step 4: Optimize Your Products with OceanWP

      OceanWP lets you optimize your product galleries to grab visitors’ attention.

      At this point, you have a basic but functioning store in place. Now, it’s time to tailor the look and feel of your WooCommerce site to meet your unique needs. When you select a new or existing product, you can scroll down to the OceanWP settings. Here, you can configure everything from the layout of your products to the color of the link text, to the logo you want featured on the page (which is handy if the product you are uploading is associated with a particularly well-known brand).

      OceanWP will also ensure that your product descriptions are optimized for mobile device browsing. Some demos (such as Store) have pre-configured product displays, which you can replace or customize to your liking. More importantly, you can add your product descriptions to your website’s homepage. This can be extremely handy if you want to showcase your latest stock or your most popular products.

      Remember to save your product descriptions as drafts, or publish them once you have finished filling in all the necessary sections. Then, you can assign your products to categories in order to keep them organized.

      Step 5: Build Item Categories

      Categories help customers rapidly find the products they are looking for.

      Using the WooCommerce plugin, you can configure the kinds of product categories you wish to add to your store. Simply navigate to Products > Categories, and you will have access to a number of options.

      For example, you can decide whether you want to have parent categories that contain various subcategories. For example, one parent category might be Menswear, with Jackets and Pants acting as subcategories. You also have the option to add thumbnail images to go along with each category.

      Every category you create will display as a page in OceanWP. If you have chosen an e-commerce demo, you will see that default categories have already been created. You are free to customize those categories as you wish. Visitors will then be able to refine their category searches by filtering results according to price, size, or other parameters you decide to include. This, in turn, will make it easier for them to make purchases.

      Step 6: Tweak Your Cart Display and Checkout Settings

      OceanWP’s multistage checkout streamlines the customer experience on multiple devices.

      OceanWP enables customers to automatically view what’s in their cart whenever a new product is added to it. Better still, the default Mini Cart feature makes it easy for mobile device shoppers to get a clear and concise overview of the products they’ve purchased.

      To make things even easier for your customers, OceanWP also helps you implement a streamlined multistage checkout system. This enables buyers to review their purchases, and select payment and shipping details with even greater ease, no matter what device they’re using.

      Although these WooCommerce-specific features are included by default, you are given the ability to further tweak their appearance using the Elementor page builder (which is bundled with OceanWP). With a little time and patience, you’ll have your e-commerce store looking great and performing perfectly in no time!

      4 OceanWP Extensions to Improve Your WooCommerce Store

      The steps outlined above cover all the building blocks necessary to create an awesome WooCommerce site. To help you further improve your store, however, OceanWP also offers several handy extensions. Once you have purchased an extension, you will receive a license key, which you can activate by navigating to Theme Panel > Licenses.

      Let’s take a look at how each of these extensions can help your e-commerce business go the extra mile.

      1. Woo Popup

      This simple yet effective extension displays a pop-up when one of your customers adds an item to a cart. This pop-up displays the price total (and the number of items in the cart), and gives the customer the choice of continuing to shop or moving on to the checkout screen.

      Using the Woo Popup extension, you can:

      • Enhance the user experience on all devices, by creating a more streamlined shopping experience.
      • Customize the color, size, and text of the pop-up.
      • Reorganize the elements of the pop-up to better match your branding.

      Price: Woo Popup can be used on a single site for $9.99 per year. Alternatively, you can also access it by purchasing OceanWP’s Core Extensions Bundle — licenses start at $39 per year.

      2. Product Sharing

      In order to maximize your client base, you need to ensure that your product descriptions are easily shareable on social media. The Product Sharing extension makes this process quick and easy.

      Using this extension, you can:

      • Add Facebook, Twitter, Pinterest, and email sharing buttons to each product.
      • Customize these sharing buttons to better match your branding.
      • Use a child theme to edit social sharing capabilities

      Price: Product Sharing is free to download and use on your OceanWP site.

      3. Portfolio

      To help your store stand out from the competition, it’s important to show off your products in the most eye-catching way possible. The Portfolio extension enables you to display your wares prominently on any page of your site. You can customize margins, overlay colors, and tweak typography to match your desired aesthetic.

      Using Portfolio, you can:

      • Effortlessly adjust image and column numbers, enabling you to showcase your products in a way that compliments your aesthetic.
      • Assign categories to your portfolio, which can correspond with your product categories.
      • Create an image portfolio that is 100% responsive on virtually any mobile device (you will also have the option to preview what your portfolio will look like on various devices before you publish it).

      Price: The Portfolio extension can be implemented on one site for $9.99 per year, or accessed by purchasing the Core Extensions Bundle.

      4. White Label

      Whatever the nature of your e-commerce store, proper branding is crucial in order to create a rapport with prospective customers. To that end, the White Label extension lets you replace instances of the OceanWP name on your site with your own brand name. It also offers ways to rename elements of your site so that they’re more optimized for search engines.

      Using the White Label extension, you can:

      • Add your brand name to all admin pages.
      • Change the theme name, URL, and description.
      • Replace the theme screenshot with one of your own choosing.

      Price: White Label can be added to a single OceanWP installation for $9.99 per year. It’s also included in the Core Extensions Bundle.

      Are You Ready to Woo?

      Creating a successful e-commerce business requires careful planning, a sound creative vision, and some dedicated work. However, by combining the WooCommerce plugin with the OceanWP WooCommerce theme, you can build a gorgeous online store in no time, and save yourself plenty of hassle and frustration in the process.



      Source link