{"id":5346,"date":"2017-09-01T07:28:32","date_gmt":"2017-09-01T07:28:32","guid":{"rendered":"http:\/\/wpthemego.com\/document\/?p=5346"},"modified":"2023-04-06T09:38:40","modified_gmt":"2023-04-06T09:38:40","slug":"how-to-add-color-swatch-and-image-in-woocommerce-products","status":"publish","type":"post","link":"https:\/\/wpthemego.com\/document\/how-to-add-color-swatch-and-image-in-woocommerce-products\/","title":{"rendered":"Documentation for SWG Swatches Variation"},"content":{"rendered":"

[vc_row][vc_column 0=””][vc_column_text]<\/p>\n

\"\"Firstly, a huge thanks for purchasing our themes and plugins. If you still had any problem with our themes or plugins, please feel free to contact us via our Support Ticket System<\/a><\/strong> then we will support you until you feel happy with our product!<\/p>\n

Normally, with a variable product in WooCommerce:<\/p>\n

    \n
  1. All variations of Variable product will be shown on Select option.<\/li>\n
  2. User can only add a variable product on the product page.<\/li>\n<\/ol>\n

    However,\u00a0 our SWG Swatches Variation plugin<\/strong><\/a> gives you an alternative to the default WooCommerce dropdown fields so that the variations on your products can be their actual colors, images, and labels. Besides, It will also allow user to be able to purchase variable products directly from the homepage or product listing page without going to a single product page. So, how to install and configure this plugin on your site, let’s start together now.<\/p>\n

     <\/p>\n

    I. INSTALL AND ACTIVE SWG SWATCHES VARIATION PLUGIN<\/strong><\/span><\/h3>\n

    To install this theme, please follow the below steps:<\/p>\n

      \n
    1. \u00a0Download<\/strong> the plugin<\/strong> from our site. You can purchase it here<\/a><\/li>\n
    2. Login to your site\u2019s admin panel and navigate to Plugins -> Add New -> Upload<\/strong>.<\/li>\n
    3. Click choose plugin’s file package<\/strong>, select the plugin file and click install<\/li>\n
    4. Click activate button to active SWG Swatches Variation plugin<\/strong> on your site<\/li>\n<\/ol>\n

      Note: This plugin will be included in our WordPress’s theme. So, If you are using our\u00a0WordPress themes, you can skip this step.<\/em><\/p>\n

       <\/p>\n

      II: ENABLE\/DISABLE SWATCHES IMAGES FEATURES<\/strong><\/span><\/h3>\n

      \"\"<\/p>\n

        \n
      1. Go to\u00a0WooCommerce > Settings > <\/strong>Choose tab SWG Wooswatches<\/strong> to open the\u00a0SWG Swatches Variation Settings<\/strong><\/li>\n
      2. Check for the Enable Swatches Variation <\/strong>parameter to enable the swatch feature on your site.<\/li>\n
      3. \"\"Check for the Enable Swatches Variation Listing<\/strong>\u00a0parameter to enable swatches variation on the product listing page.<\/li>\n
      4. \"\" Enable and disable tooltip from Enable Tooltip settings<\/strong>.\"\"<\/li>\n
      5. Choose image size of Tooltip in the Image Tool Tip<\/strong> parameter<\/li>\n
      6. Set the size for product variable in the Product Variable width parameter<\/strong> and Product Variable height parameter.<\/strong><\/li>\n
      7. Add color code for activation status in the Active Color<\/strong> parameter.<\/li>\n
      8. Click on the save changes button<\/strong><\/li>\n<\/ol>\n

         <\/p>\n

        III: CREATE PRODUCT ATTRIBUTES<\/strong><\/span><\/h3>\n

         <\/p>\n

        Two different product attribute types are available in WooCommerce, local and global product attributes. In WooCommerce, both options are called attributes, but there is a difference in the functionality of these attributes.<\/p>\n

        3.1 GLOBAL ATTRIBUTE
        \n<\/strong><\/p>\n

        These are the properties that you will find in the WP-Admin under Product > Attributes. All attributes created here are at on a global website level and can be used with all products. Here you can quickly and easily add attributes and their terms.<\/p>\n

        To create a Global Attribute, please follow the below steps:<\/p>\n

        Step 1: Create Global Attribute<\/strong><\/p>\n

          \n
        1. Login to your site\u2019s admin panel and navigate to Product -> Attributes -> Add new attribute<\/strong><\/li>\n
        2. Add a Name<\/strong>.<\/li>\n
        3. Add a Slug<\/strong>; (optional); this is the URL-friendly version of the name.<\/li>\n
        4. Enable Archives<\/strong> if desired. If enabled, you can view a page with all products having this attribute. For example, if you have this enabled, and \u201cblack\u201d is one of the options under \u201ccolor\u201d, you can add http:\/\/yourstore.com\/pa_color\/black\/ to your menu to only display black clothing \u2013 pa stands for \u201cproduct attribute.\u201d<\/li>\n
        5. Set type of attribute<\/strong>: select<\/strong> or checkbox<\/strong><\/li>\n
        6. Select a Default sort order<\/strong>. Choose between \u201cName\u201d, \u201cName (numeric)\u201d, \u201cTerm ID\u201d or \u201cCustom ordering\u201d where you decide by dragging and dropping the terms in the list when configuring the terms (see below). \u201cName (numeric)\u201d is relevant if the values are numbers. If you select \u201cName\u201d, it sorts alphabetically with 1 and 10 preceding 2. If you select \u201cName (numeric)\u201d it sorts based on numerical value.<\/li>\n
        7. Click to Add Attribute<\/strong>.<\/li>\n<\/ol>\n

          Step 2: Create Attribute’s Term<\/strong><\/p>\n

            \n
          1. Click on the \u201cConfigure terms<\/strong>\u201d text to add attribute values. \u00a0 \"\"<\/li>\n
          2. Add Name<\/strong><\/li>\n
          3. Add a Slug<\/strong><\/li>\n
          4. Add Description<\/strong>. This field isn’t required. So, you can empty if you want<\/li>\n
          5. If you want to show this term in color, please click on the Select Color<\/strong> button and set color<\/strong><\/li>\n
          6. If you want to show this term in image, please click on the Upload\/Add an image<\/strong> to update an image for this term<\/li>\n<\/ol>\n

            \"\"<\/strong><\/p>\n

            3.2 LOCAL ATTRIBUTE:<\/strong><\/p>\n

            These attributes are created when you create or edit a product. You can’t use these attributes to filter and they are only visible on the product page itself. Alternatively, add an attribute you only want to use for one product. This would only be ideal if you have a product with unique variations.<\/p>\n

            To create a Local Attribute, please follow the below steps:<\/p>\n

              \n
            1. Login to your site\u2019s admin panel and navigate to Product -> Add Product<\/strong>(or edit an existing one).<\/li>\n
            2. Scroll down at product data<\/strong> and click to the Attributes tab.<\/strong><\/strong><\/li>\n
            3. Select Custom product attribute<\/strong> in the drop-down and click on the Add button.<\/strong><\/strong><\/li>\n
            4. Add Name<\/strong><\/li>\n
            5. Add Values<\/strong>( each attribute’s value will separated by “|”)<\/li>\n
            6. Check for the Used for variations<\/strong> checkbox<\/li>\n
            7. Click on the Save attributes button\"\"<\/strong><\/li>\n
            8. Click on the Update<\/strong> button<\/li>\n
            9. Scroll down at product data<\/strong> section and click on the Sw WooSwatches tab<\/strong><\/li>\n
            10. Click on the Local Attribute<\/strong> which do you want to configure<\/li>\n
            11. Select COLOR<\/strong> or IMAGE.
              \n<\/strong><\/li>\n
            12. Set color<\/strong> if you choose color or add an image<\/strong> if you choose Image<\/li>\n
            13. Select Attribute type : Select<\/strong>\/ checkbox\"\"<\/strong><\/li>\n<\/ol>\n

              For both of attribute types, Please note that:<\/em><\/p>\n