Picasso Design Set

Details
Author: 
Noel

what we need: 



Description:

In this article, I am doing a little Oxygen Builder Design Set freebie of a project that I worked on a good while ago.

You are free to use the Picasso Design set both in private & comercial work.

This design set features the well known SwiperJS slider to achieve the 3D Cube effect. for any customization instructions please refer to the SwiperJS API Documentation.

 


Picasso Design Set

    Woocommerce Pages & Templates

    • Category Archive 3D Cube (swiperjs)

    oxygen-design-set-product-category-archive

    • Shop Archive 3D Cube (swiperjs)

    • Single Product Page with 3D Cube (swiperjs)

    • Improved Cartflows Checkout


    Additional Pages

    • About Page

    • Fluent Forms Contact Page

    • Privacy Policy Page

    • Coming Soon Page


    How to implement Picasso Design Set

    Installation Instructions:

    1. Go to Oxygen → Settings → Library → Tick “Enable 3rd Party Design Sets” & add the license key you downloaded. Click Add Source Site.
    2. Now the new design set will be available under +Add > Library in the Oxygen builder. You can also install the entire design set from the site installation wizard, accessible via Oxygen > Home in the WordPress admin panel.

    3. Resign Shortcodes for the added Templates & Pages via Oxygen → Settings → Security → Sign all Shortcodes

    4. Download & Install/Import what you need from the Download & Asset Section below:
      • SwiperJS custom functionality Plugin or add scripts to wp head via Code Snippets
      • AdvancedCustomFields Fieldgroups
      • Picasso Products .csv
      • Cartflows Checkout Flow
      • Fluent Forms
      • Code Snippets (skip cart script, critical css, enqueue SwiperJS)
    5. View your Site & enjoy customizing

    NOTE:

    No support for free products. If you need help to set up the Picasso Design set feel free to use my contact form.

    Something not displaying correctly? Make sure to Resign Shortcodes, Save Permalinks & Regenerate CSS Cache.


    How to use

    Adding & Displaying Product Category Archive

    Show screenshot

    You will need to manually edit the product category archive to add the content. To do so visit the Category Archive Page and add the needed category thumbnails, names & links via the Custom Fields.

    The Category Archive is NOT dynamic!

     

    Adding & Displaying Product Properties

    Show screenshot

    You can add product properties & display them individually to your liking.

     

    Adding Images to the Single Product Page

    Show screenshot

    single product page gallery

     

    Adding Product to Archive

    Show screenshot

    woocommerce_product_picture_oxygen_builder.

    to add a product to the shop archive, create a new product, add a featured Image & save the product.

     

    NOTE:

    Keep in mind that all the Images in this Design Set are all squares 1:1. Image aspect ratio should be consistent through the show. All repeaters are set to standard wp query.


    Download Section & Assets

    Enqueue SwiperJS (2 Options)

    add_action( 'wp_head', function () { ?>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <?php } );

     


    Import Advanced Custom Field Groups

    • Download & Import ACF Field Group .json from below.
    • Go to Custom FieldsToolsImport File

    NOTE:

    To Download Form .json visit the link below & rightclick to save (or CMD+S) the .json file.

    You will need Advanced Custom Fields Pro to make use of the repeater fields used in this Design Set. Feel free to replace acf with your favorite alternative.


    WordPress & WooCommerce

    • Download Product .csv file below & Import via Products → Product Import → Upload & Import .csv (Optional)

    NOTE:

    Importing the Product .csv will help you load all the Product Photos, Descriptions etc from the Picasso Demo.


    Oxygen Builder & Oxygen Elements for WooCommerce

    • Download Design Set key from the API Key Section & add them to the Oxygen library settings.

    NOTE:

    Please keep in mind that you will need to log in to get access to the design set. If you dont have an account, download picasso design set below.


    Code Snippets (Free) or Advanced Scripts (Paid)

    • Add Skip Cart PHP script
    add_filter('woocommerce_add_to_cart_redirect', 'themeprefix_add_to_cart_redirect');
    function themeprefix_add_to_cart_redirect() {
     global $woocommerce;
     $checkout_url = wc_get_checkout_url();
     return $checkout_url;
    }

     

    • Add Critical CSS for enhanced UX (Optional)
    add_action( 'wp_head', function () { ?>
    <style>
    .swiper-wrapper > .swiper-slide:not(.swiper-slide-prev):not(.swiper-slide-active):not(.swiper-slide-next) {
      opacity: 0;
    }
    .swiper-wrapper > .swiper-slide:first-child {
      opacity: 1 !important;
    }
    .label {
    display:none !important;
    }
    .reset_variations{
    display:none !important;
    }
    #size{
    border-radius: 1px !important;
    border-bottom: 2px solid black;
    border-right: 0px !important;
    border-left: 0px !important;
    }
    .woocommerce-variation-price{
    display:none !important;
    visibility:hidden !important;
    }
    </style>
    <?php } );
    

    Cartflows Free (optional)

    • Install & Activate Cartflows (Free) for a better Checkout experiance
    • Download Cartflows Checkout .json below & import via Cartflows → Flows → Import
      • Find out more about Importing Flows here

    NOTE:

    To Download Form .json visit the link below & rightclick to save (or CMD+S) the .json file.


    Fluent Forms (optional)

    • Install & Activate Fluent Forms (Free) for the Contact Form.
    • Download Picasso Form .json below & import via Fluent Forms → Tools → Import forms

    &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

      &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;code style="display: none;"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

        &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;code style="display: none;"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

        &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;code style="display: none;"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;NOTE:

        &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;code style="display: none;"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;You can freely replace the current Fluent Form Shortcode.
        &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;code style="display: none;"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;To do that open the Contact Page & replace the shortcode with your favorite wordpress form.

        To Download Form .json visit the link below & rightclick to save (or CMD+S) the .json file.

         

        &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;code style="display: none;"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!--mep-nl--&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;


        Picasso Design Set API KEY

        To access the design set api key please log in.
        Log in with:
        or use any social:
        Top