Picasso: A Free Oxygen Builder Design Set

November 3, 2020
Details
Author:
Colorless Studio
 
what we need: 



Description:

In this article, we are giving away a Free Oxygen Builder Design Set of a project that we worked on a good while ago.

You are free to use the Picasso Oxygen Design set both in private & commercial 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.

Please feel free to submit your finished Picasso Design Set project for our handpicked #builtwithoxygenbuilder Website Archive here:


Free Picasso Oxygen Builder 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 Cartimize Linear Checkout

    cartimize linear 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 design set license key you see here. 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:
    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. You will need to reconnect the images on the Product & Archive Pages after installing the design set as ACF does not link Images when migrating fields.

    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. (repeater images need to be reconnected after importing field groups as explained here)

    Oxygen Builder & Oxygen Elements for WooCommerce

    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 } );
    

    Cartimize Linear Checkout Free (optional)

    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.

    design set API KEY

    To access the design set api key please log in.

    About the Author

    Colorless Studio
    Meet Noel - a designer, developer, and crypto enthusiast who blogs about various topics, including design, development, workflow optimization, cryptocurrencies, building services and many other exciting subjects. As the founder of Colorless Identity, he is always on the lookout for the next upcoming technologies. His deep understanding of the latest, cutting-edge technologies is what you need to accomplish your business goals faster.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    4 comments on “Picasso: A Free Oxygen Builder Design Set”

    1. I like this design set. great work thanks.

      Is it possible to use with toolset as I dont have acf pro for the repeaters?

      thanks

      1. Hello Mohamed,

        Thank you for the kind words!

        This free Oxygen Design Set is currently implemented with Advanced Custom Fields Pro only.

        I haven’t used Toolset before, so I can’t give you any expertise on that, but I am positive you can do it yourself if you are comfortable working with Toolset. You should also have no problems implementing it with acf alternatives like Carbon Fields or MetaBox.

        xx

        Noel

    This site may contain affiliate links.

    Top