• Category Archive 3D Cube (swiperjs)

• Shop Archive 3D Cube (swiperjs)

• Single Product Page with 3D Cube (swiperjs)

• Improved Cartimize Linear Checkout

• About Page

• Fluent Forms Contact Page

• Privacy Policy Page

• Coming Soon Page

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:
   • SwiperJS custom functionality Plugin or add scripts to wp head via Code Snippets
   • Advanced Custom Fields Pro Fieldgroups
   • Picasso Products .csv (optional)
   • Design Set Api Key for Oxygen Builder
   • Fluent Forms (optional)
   • Code Snippets or Advanced Scripts (skip cart script, critical css, enqueue SwiperJS)
   • Cartimize Linear Checkout
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.

Adding & Displaying Product Category Archive

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

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

Adding Images to the Single Product Page

Adding Product to Archive

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.

Enqueue SwiperJS (2 Options)

• Enqueue SwiperJS to wp_head via Code Snippets / Advanced Scripts or download, install & activate SwiperJS enqueue plugin below.

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 Fields → Tools → Import 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

• Download Design Set key from the API Key Section & add them to the Oxygen library settings as explained in the Installation Instructions.

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)

• Install & Activate Cartimize Linear Checkout (Free) for a better Checkout experiance.

Fluent Forms (optional)

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

<!--mep-nl-->

<code style="display: none;"><!--mep-nl-->

<!--mep-nl--><!--mep-nl--><!--mep-nl--><code style="display: none;"><!--mep-nl--><!--mep-nl-->

<!--mep-nl--><code style="display: none;"><!--mep-nl--><!--mep-nl-->NOTE:

<!--mep-nl--><code style="display: none;"><!--mep-nl--><!--mep-nl-->You can freely replace the current Fluent Form Shortcode.
<!--mep-nl--><code style="display: none;"><!--mep-nl--><!--mep-nl-->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.