WooCommerce can be modified in many different ways. Using oxygen builder you can get the most out of your WooCommerce and modify it to its core. The below steps show how to make your WooCommerce cart total in a ajax format. You can use the element literally anywhere for your needs.

  1. Add a codeblock
  2. Insert the follwing into "PHP & HTML":
<div class="cart-count">
   <?php echo WC()->cart->get_cart_contents_count();?>
 </div>
  1. Install you favourite code snippets plugin like - Advanced Scripts
  2. Create a New PHP Snippet / PHP Script
  3. Insert the following into the "Code"-section:
Code of WooCommerce Cart Total Ajax in Advanced Scripts
 add_filter('woocommerce_add_to_cart_fragments', function($fragments) {
 	ob_start();
 ?>

 <div class="cart-count">
 	<?php echo WC()->cart->get_cart_contents_count(); ?>
 </div>

 <?php $fragments['div.cart-count'] = ob_get_clean();
 return $fragments;
 });
  1. Now you can give you snippet a name and save it.

In this tutorial, we'll look at creating a custom carousel slider. This can be useful to showcase your posts, products and custom post types with Owl Carousel using a repeater.

Owl Carousel Example
Owl Carousel Example

Ads Disable Temporarily

Things Needed

We will create the carousel with a repeater element as this way we can reuse the carousel.

Create a new snippet - I named it scripts enqueue for my better understanding. I had the owl.carousel.min.css, owl.theme.default.min.css & owl.carousel.min.js uploaded to the directory /wp-content/snips/ this can be downloaded from owl carousel github page linked above.

/* Owl Start */

wp_enqueue_style( 'owlcore', '/wp-content/snips/owl.carousel.min.css' );
wp_enqueue_style( 'owltheme', '/wp-content/snips/owl.theme.default.min.css' );
wp_enqueue_script( 'owljs', '/wp-content/snips/owl.carousel.min.js',array( 'jquery' ),'2.3.4',true);

/* Owl End */

Step 2: Create the repeater element

For me I created a Repeater with the following elements. All the elements were wrapped inside a Div element and all elements in the div is stacked vertically with 100% width.

Repeater Element Structure
Repeater Element Structure

Step 3: Modify the Elements

Repeater Element

Add a class of owl-carousel (or a choice of yours) to the element

Under query option I manually put up the queries. For better understanding you can use Sridhar's Guide - https://wpdevdesign.com/manual-query-params-in-oxygen/

post_type=post&amp;posts_per_page=6&amp;no_found_rows=true&amp;nopaging=true

In the layout option make child elements stack horizontally with top vertical alignment and center horizontal alignment.

Repeater Layout Option

Ads Disable Temporarily

Div Element

Make width 100%

Step 4: Create a Code Block

In the code block just paste the below javascript

jQuery(".owl-carousel &gt; .oxy-repeater-pages-wrap").remove();

jQuery('.owl-carousel').owlCarousel({
   autoplay:true,
   autoplayTimeout:2000,
   autoplayHoverPause:true,
  loop: true,
responsive: {
// breakpoint from 0 and up
0: {
items: 1,
nav: true,
margin: 10,
slideBy: 1,
rewind: false,
},
// breakpoint from 500 and up
500: {
items: 2,
nav: true,
margin: 10,
slideBy: 1,
rewind: false,
},
// breakpoint from 768 and up
768: {
items: 2,
margin: 10,
nav: true,
slideBy: 1,
rewind: false,
},
// breakpoint from 1024px and up
1024: {
items: 3,
margin: 20,
nav: true,
slideBy: 1,
rewind: false,
// autoplay: true,
// autoplaySpeed: 1500
},
// breakpoint from 1440px and up
1440: {
items: 4,
margin: 20,
nav: true,
slideBy: 1,
rewind: false,
// autoplay: true,
// autoplaySpeed: 1500
}
}
});

To explain the above the first set of code is to remove repeater navigation which is unnecessary in this stance. The Next and final code initializes owl carousel.

When adding the javascript note that you should change the word owl-carousel to the name you used in the repeater.

Next add the following css in the css section of the code block.

.owl-theme .owl-nav {
margin-top: 10px;
outline: none;
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
position: absolute;
padding: 10px !important;
top: 38%;
line-height: 1;
outline: none;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
background: none;
color: #404040;
outline: none;
}
.owl-carousel .owl-nav .owl-prev span,
.owl-carousel .owl-nav .owl-next span {
font-size: 40px;
outline: none;
color: #fff;
}
.owl-carousel .owl-nav .owl-prev {
left: -10px;
}
.owl-carousel .owl-nav .owl-next {
right: -10px;
}

.owl-carousel .oxy-repeater-pages-wrap {
  display: none;
}

Change the CSS Values as necessary.

Customization

The carousel script can also be customized. It's just incredibly easy modify the options: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
For modifications based on classes visit: https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html

Hydrogen Paste Code

The Below Code is from generated from Hydrogen Plugin. Use the copy button and then paste it inside oxygen builder. Requires Hydrogen Paste or Hydrogen Plugin 

eyJzb3VyY2UiOiJodHRwczovL3d3dy5pYnJhaGltLWphYmVyLmNvbSIsImNvbXBvbmVudCI6W3siaWQiOjE2OCwibmFtZSI6ImN0X3NlY3Rpb24iLCJvcHRpb25zIjp7ImN0X2lkIjoxNjgsImN0X3BhcmVudCI6MCwic2VsZWN0b3IiOiJzZWN0aW9uLTE2OC0xODcyIiwib3JpZ2luYWwiOnt9fSwiZGVwdGgiOjEsImNoaWxkcmVuIjpbeyJpZCI6MSwibmFtZSI6Im94eV9keW5hbWljX2xpc3QiLCJvcHRpb25zIjp7ImN0X2lkIjoxLCJjdF9wYXJlbnQiOjE2OCwic2VsZWN0b3IiOiJfZHluYW1pY19saXN0LTEtMTg3MiIsIm9yaWdpbmFsIjp7IndwX3F1ZXJ5IjoibWFudWFsIiwicXVlcnlfYXJncyI6InBvc3RfdHlwZT1wb3N0JnBvc3RzX3Blcl9wYWdlPTYmbm9fZm91bmRfcm93cz10cnVlJm5vcGFnaW5nPXRydWUiLCJmbGV4LWRpcmVjdGlvbiI6InJvdyIsImRpc3BsYXkiOiJmbGV4IiwiYWxpZ24taXRlbXMiOiJmbGV4LXN0YXJ0IiwianVzdGlmeS1jb250ZW50IjoiY2VudGVyIiwidGV4dC1hbGlnbiI6ImNlbnRlciJ9LCJjbGFzc2VzIjpbIm93bC1jYXJvdXNlbCJdLCJhY3RpdmVzZWxlY3RvciI6Im93bC1jYXJvdXNlbCJ9LCJjaGlsZHJlbiI6W3siaWQiOjIsIm5hbWUiOiJjdF9kaXZfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjoyLCJjdF9wYXJlbnQiOjEsInNlbGVjdG9yIjoiZGl2X2Jsb2NrLTItMTg3MiIsIm9yaWdpbmFsIjp7IndpZHRoIjoiMTAwIiwid2lkdGgtdW5pdCI6IiUifSwiYWN0aXZlc2VsZWN0b3IiOmZhbHNlfSwiY2hpbGRyZW4iOlt7ImlkIjoyNCwibmFtZSI6ImN0X2ltYWdlIiwib3B0aW9ucyI6eyJjdF9pZCI6MjQsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiJpbWFnZS0yNC0xODcyIiwib3JpZ2luYWwiOnsic3JjIjoiW294eWdlbiBjdF9zaWduX3NoYTI1Nj0nZmYzYzBkNTMzYzRjM2VlYjg3MjBjZWFiM2I0YmEyMjM3MDU4YmJjNzY2YzAwOTYzYjIzZDdlODE5MWMyMzIxMycgZGF0YT0nZmVhdHVyZWRfaW1hZ2UnIHNpemU9J21lZGl1bScgXSIsInNyY2R5bmFtaWMiOnRydWV9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOmZhbHNlfSx7ImlkIjozNywibmFtZSI6ImN0X2hlYWRsaW5lIiwib3B0aW9ucyI6eyJjdF9pZCI6MzcsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiJoZWFkbGluZS0zNy0xODcyIiwiY3RfY29udGVudCI6IjxzcGFuIGlkPVwiY3QtcGxhY2Vob2xkZXItNDhcIj48L3NwYW4+In0sImNoaWxkcmVuIjpbeyJpZCI6NDgsIm5hbWUiOiJjdF9zcGFuIiwib3B0aW9ucyI6eyJjdF9pZCI6NDgsImN0X3BhcmVudCI6MzcsInNlbGVjdG9yIjoic3Bhbi00OC0xODcyIiwiY3RfY29udGVudCI6IltveHlnZW4gY3Rfc2lnbl9zaGEyNTY9J2FjNmVmNmQ5YzIxNzZiM2UyNTYzOTI5M2ViODQ0NmIxMjBmZDJmYjY1OGJmZDY0NTMyMGE3NTY5NDlhYzY3ZTgnIGRhdGE9J3RpdGxlJyBsaW5rPSdwZXJtYWxpbmsnIF0ifSwiZGVwdGgiOmZhbHNlfV0sImRlcHRoIjpmYWxzZX0seyJpZCI6ODAsIm5hbWUiOiJjdF90ZXh0X2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6ODAsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiJ0ZXh0X2Jsb2NrLTgwLTE4NzIiLCJjdF9jb250ZW50IjoiPHNwYW4gaWQ9XCJjdC1wbGFjZWhvbGRlci04MVwiPjwvc3Bhbj4ifSwiY2hpbGRyZW4iOlt7ImlkIjo4MSwibmFtZSI6ImN0X3NwYW4iLCJvcHRpb25zIjp7ImN0X2lkIjo4MSwiY3RfcGFyZW50Ijo4MCwic2VsZWN0b3IiOiJzcGFuLTgxLTE4NzIiLCJjdF9jb250ZW50IjoiW294eWdlbiBjdF9zaWduX3NoYTI1Nj0nYmM3ZTIyY2QzOTZjN2M0N2Y4NWFlZTk2ZDlmMDRkNTIxNDIxM2EzZDAwNjk0M2YxOGE0ZmJmNGZjZjQ2MDBmMCcgZGF0YT0nZXhjZXJwdCcgXSJ9LCJkZXB0aCI6ZmFsc2V9XSwiZGVwdGgiOmZhbHNlfSx7ImlkIjo2MiwibmFtZSI6ImN0X2xpbmtfYnV0dG9uIiwib3B0aW9ucyI6eyJjdF9pZCI6NjIsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiJsaW5rX2J1dHRvbi02Mi0xODcyIiwiY2xhc3NlcyI6WyJnbG9iYWxidG4iXSwiYWN0aXZlc2VsZWN0b3IiOiJnbG9iYWxidG4iLCJjdF9jb250ZW50IjoiUmVhZCBNb3JlIn0sImRlcHRoIjpmYWxzZX1dLCJkZXB0aCI6M31dLCJkZXB0aCI6Mn0seyJpZCI6ODMsIm5hbWUiOiJjdF9jb2RlX2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6ODMsImN0X3BhcmVudCI6MTY4LCJzZWxlY3RvciI6ImNvZGVfYmxvY2stODMtMTg3MiIsIm9yaWdpbmFsIjp7Imdsb2JhbENvbmRpdGlvbnNSZXN1bHQiOnRydWUsImNvZGUtY3NzIjoiLm93bC10aGVtZSAub3dsLW5hdiB7XG5tYXJnaW4tdG9wOiAxMHB4O1xub3V0bGluZTogbm9uZTtcbn1cbi5vd2wtY2Fyb3VzZWwgLm93bC1uYXYgYnV0dG9uLm93bC1wcmV2LFxuLm93bC1jYXJvdXNlbCAub3dsLW5hdiBidXR0b24ub3dsLW5leHQge1xucG9zaXRpb246IGFic29sdXRlO1xucGFkZGluZzogMTBweCAhaW1wb3J0YW50O1xudG9wOiAzOCU7XG5saW5lLWhlaWdodDogMTtcbm91dGxpbmU6IG5vbmU7XG59XG4ub3dsLWNhcm91c2VsIC5vd2wtbmF2IGJ1dHRvbi5vd2wtcHJldjpob3Zlcixcbi5vd2wtY2Fyb3VzZWwgLm93bC1uYXYgYnV0dG9uLm93bC1uZXh0OmhvdmVyIHtcbmJhY2tncm91bmQ6IG5vbmU7XG5jb2xvcjogIzQwNDA0MDtcbm91dGxpbmU6IG5vbmU7XG59XG4ub3dsLWNhcm91c2VsIC5vd2wtbmF2IC5vd2wtcHJldiBzcGFuLFxuLm93bC1jYXJvdXNlbCAub3dsLW5hdiAub3dsLW5leHQgc3BhbiB7XG5mb250LXNpemU6IDQwcHg7XG5vdXRsaW5lOiBub25lO1xuY29sb3I6ICNmZmY7XG59XG4ub3dsLWNhcm91c2VsIC5vd2wtbmF2IC5vd2wtcHJldiB7XG5sZWZ0OiAtMTBweDtcbn1cbi5vd2wtY2Fyb3VzZWwgLm93bC1uYXYgLm93bC1uZXh0IHtcbnJpZ2h0OiAtMTBweDtcbn1cblxuLm93bC1jYXJvdXNlbCAub3h5LXJlcGVhdGVyLXBhZ2VzLXdyYXAge1xuICBkaXNwbGF5OiBub25lO1xufSIsImNvZGUtanMiOiJqUXVlcnkoXCIub3dsLWNhcm91c2VsID4gLm94eS1yZXBlYXRlci1wYWdlcy13cmFwXCIpLnJlbW92ZSgpO1xuXG5qUXVlcnkoJy5vd2wtY2Fyb3VzZWwnKS5vd2xDYXJvdXNlbCh7XG4gICBhdXRvcGxheTp0cnVlLFxuICAgYXV0b3BsYXlUaW1lb3V0OjIwMDAsXG4gICBhdXRvcGxheUhvdmVyUGF1c2U6dHJ1ZSxcbiAgbG9vcDogdHJ1ZSxcbnJlc3BvbnNpdmU6IHtcbi8vIGJyZWFrcG9pbnQgZnJvbSAwIGFuZCB1cFxuMDoge1xuaXRlbXM6IDEsXG5uYXY6IHRydWUsXG5tYXJnaW46IDEwLFxuc2xpZGVCeTogMSxcbnJld2luZDogZmFsc2UsXG59LFxuLy8gYnJlYWtwb2ludCBmcm9tIDUwMCBhbmQgdXBcbjUwMDoge1xuaXRlbXM6IDIsXG5uYXY6IHRydWUsXG5tYXJnaW46IDEwLFxuc2xpZGVCeTogMSxcbnJld2luZDogZmFsc2UsXG59LFxuLy8gYnJlYWtwb2ludCBmcm9tIDc2OCBhbmQgdXBcbjc2ODoge1xuaXRlbXM6IDIsXG5tYXJnaW46IDEwLFxubmF2OiB0cnVlLFxuc2xpZGVCeTogMSxcbnJld2luZDogZmFsc2UsXG59LFxuLy8gYnJlYWtwb2ludCBmcm9tIDEwMjRweCBhbmQgdXBcbjEwMjQ6IHtcbml0ZW1zOiAzLFxubWFyZ2luOiAyMCxcbm5hdjogdHJ1ZSxcbnNsaWRlQnk6IDEsXG5yZXdpbmQ6IGZhbHNlLFxuLy8gYXV0b3BsYXk6IHRydWUsXG4vLyBhdXRvcGxheVNwZWVkOiAxNTAwXG59LFxuLy8gYnJlYWtwb2ludCBmcm9tIDE0NDBweCBhbmQgdXBcbjE0NDA6IHtcbml0ZW1zOiA0LFxubWFyZ2luOiAyMCxcbm5hdjogdHJ1ZSxcbnNsaWRlQnk6IDEsXG5yZXdpbmQ6IGZhbHNlLFxuLy8gYXV0b3BsYXk6IHRydWUsXG4vLyBhdXRvcGxheVNwZWVkOiAxNTAwXG59XG59XG59KTsiLCJjb2RlLXBocCI6Ijw/cGhwXG5cdC8qIE93bCBTdGFydCAqL1xuXG53cF9lbnF1ZXVlX3N0eWxlKCAnb3dsY29yZScsICcvd3AtY29udGVudC9zbmlwcy9vd2wuY2Fyb3VzZWwubWluLmNzcycgKTtcbndwX2VucXVldWVfc3R5bGUoICdvd2x0aGVtZScsICcvd3AtY29udGVudC9zbmlwcy9vd2wudGhlbWUuZGVmYXVsdC5taW4uY3NzJyApO1xud3BfZW5xdWV1ZV9zY3JpcHQoICdvd2xqcycsICcvd3AtY29udGVudC9zbmlwcy9vd2wuY2Fyb3VzZWwubWluLmpzJyxhcnJheSggJ2pxdWVyeScgKSwnMi4zLjQnLHRydWUpO1xuXG4vKiBPd2wgRW5kICovXG4/PiJ9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOmZhbHNlfV19XSwiY2xhc3NlcyI6eyJvd2wtY2Fyb3VzZWwiOnsib3JpZ2luYWwiOnsiZmxleC1kaXJlY3Rpb24iOiJyb3ciLCJkaXNwbGF5IjoiZmxleCIsImFsaWduLWl0ZW1zIjoiY2VudGVyIiwianVzdGlmeS1jb250ZW50IjoiY2VudGVyIiwidGV4dC1hbGlnbiI6ImNlbnRlciJ9fSwiZ2xvYmFsYnRuIjp7ImtleSI6Imdsb2JhbGJ0biIsIm1lZGlhIjp7InBob25lLXBvcnRyYWl0Ijp7Im9yaWdpbmFsIjp7ImJ1dHRvbi1zaXplIjoiOCJ9fX0sIm9yaWdpbmFsIjp7ImZvbnQtZmFtaWx5Ijp7IjAiOiJnbG9iYWwiLCIxIjoiVGV4dCJ9LCJwYWRkaW5nLXRvcCI6IjIwIiwicGFkZGluZy1sZWZ0IjoiMTAiLCJwYWRkaW5nLWJvdHRvbSI6IjIwIiwicGFkZGluZy1yaWdodCI6IjEwIiwiYmFja2dyb3VuZC1jb2xvciI6ImNvbG9yKDM5KSIsImNvbG9yIjoiI2ZmZmZmZiIsImZvbnQtc2l6ZSI6IjIwIiwidGV4dC1hbGlnbiI6ImNlbnRlciIsImxpbmUtaGVpZ2h0IjoiMS4yIiwibGV0dGVyLXNwYWNpbmciOiIzIiwiZm9udC13ZWlnaHQiOiI3MDAiLCJtYXJnaW4tdG9wIjoiMCIsImJvdHRvbSI6IjAiLCJmbGV4LWRpcmVjdGlvbiI6InVuc2V0IiwibWFyZ2luLWxlZnQiOiIwIiwibWFyZ2luLXJpZ2h0IjoiMCIsIm1hcmdpbi1ib3R0b20iOiIwIn19fSwiY29sb3JzIjp7IjM5Ijp7ImlkIjozOSwibmFtZSI6IiMwMDc0ZGIiLCJ2YWx1ZSI6IiMwMDc0ZGIifX19

Ads Disable Temporarily

If you prefer other carousels over flickity you can try the below:

Ads Temporarily Disabled

In this tutorial, we'll look at creating a custom carousel slider. This can be useful to showcase your posts, products and custom post types with flickity using a repeater.

Flickity Carousel Example
Flickity Carousel Example

Ads Disable Temporarily

Things Needed

We will create the carousel with a repeater element as this way we can reuse the carousel.

Step 1: Enqueue the Necessary Scripts & CSS using Code Snippets

Create a new snippet - I named it scripts enqueue for my better understanding. I had the flickity.min.css & flickity.pkgd.min.js uploaded to the directory /wp-content/snips/

/*Carousel Start */

wp_enqueue_style( 'flickcore', '/wp-content/snips/flickity.min.css' );
wp_enqueue_script( 'flickjs', '/wp-content/snips/flickity.pkgd.min.js',array( 'jquery' ),'2.2.1',true);

/*Carousel End */

Step 2: Create the repeater element

For me I created a Repeater with the following elements. All the elements were wrapped inside a Div element as we need a div element to declare it as a carousel cell needed for the carousel to work well.

Repeater Element Structure
Repeater Element Structure

Step 3: Modify the Elements

Repeater Element

Add a class of flick (or a choice of yours) to the element

Under query option I manually put up the queries. For better understanding you can use Sridhar's Guide - https://wpdevdesign.com/manual-query-params-in-oxygen/

post_type=post&amp;posts_per_page=6&amp;no_found_rows=true&amp;nopaging=true

For sizing option make width 100%

For layout make the element a block

Div Element

Add a Class of Carousel-cell for the div to work correctly as a single slide.

For Layout options, All child elements stacked vertically with Horizontal alignment in the center and Vertical Alignment in the top.

For the Div element I added a padding of 5 px to left and right to make spacing. It is advised to only use padding in the case of carousel to avoid errors that is caused by margins.

In the stance for width I gave 25% as this would yield 4 carousel in view. You can also give 33.33% if you require on 3 carousel in view or as needed.

For the height make height AUTO

Ads Disable Temporarily

Step 4: Create a Code Block

In the code block just paste the below javascript

jQuery(".flick").flickity({
  cellAlign: 'left',
  contain: true,
  wrapAround: true,
  autoPlay: true,
  prevNextButtons: false,
  pauseAutoPlayOnHover: false,
});

To explain the above the first set of code is to remove repeater navigation which is unnecessary in this stance. Second code ensures the height of the carousel is as needed and matches the highest height to the repeater itself with the class flick and finally the last code initializes the carousel script.

The code has been updated only to work with flickity. The code would initialize the carousel script.

When adding the javascript note that you should change the word flick to the name you used in the repeater.

Result

Hydrogen Paste Code

The Below Code is from generated from Hydrogen Plugin. Use the copy button and then paste it inside oxygen builder. Requires Hydrogen Paste or Hydrogen Plugin

eyJzb3VyY2UiOiJodHRwczovL3d3dy5pYnJhaGltLWphYmVyLmNvbSIsImNvbXBvbmVudCI6W3siaWQiOjIxNCwibmFtZSI6ImN0X2Rpdl9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjIxNCwiY3RfcGFyZW50IjoxLCJzZWxlY3RvciI6ImRpdl9ibG9jay0yMTQtMTg2MSIsIm9yaWdpbmFsIjp7fX0sImRlcHRoIjo0LCJjaGlsZHJlbiI6W3siaWQiOjExLCJuYW1lIjoiY3RfY29kZV9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjExLCJjdF9wYXJlbnQiOjIxNCwic2VsZWN0b3IiOiJjb2RlX2Jsb2NrLTUxOS01Iiwib3JpZ2luYWwiOnsiY29kZS1jc3MiOiIiLCJjb2RlLXBocCI6Ijw/cGhwXG4gICAvKkZsaWNraXR5IFN0YXJ0ICovXG53cF9lbnF1ZXVlX3N0eWxlKCAnZmxpY2tjb3JlJywgJy93cC1jb250ZW50L3NuaXBzL2ZsaWNraXR5Lm1pbi5jc3MnICk7XG53cF9lbnF1ZXVlX3NjcmlwdCggJ2ZsaWNranMnLCAnL3dwLWNvbnRlbnQvc25pcHMvZmxpY2tpdHkucGtnZC5taW4uanMnLGFycmF5KCAnanF1ZXJ5JyApLCcyLjIuMScsdHJ1ZSk7XG5cbi8qRmxpY2tpdHkgRW5kICovXG4/PiIsImNvZGUtanMiOiJqUXVlcnkoXCIjX2R5bmFtaWNfbGlzdC00NTYtNSA+IC5veHktcmVwZWF0ZXItcGFnZXMtd3JhcFwiKS5yZW1vdmUoKTtcblxualF1ZXJ5KGZ1bmN0aW9uKCQpIHtcbnZhciBjY2VsbEhlaWdodCA9IDA7XG4kKFwiLmNhcm91c2VsLWNlbGxcIikuZWFjaChmdW5jdGlvbigpe1xuICAgaWYgKCQodGhpcykuaGVpZ2h0KCkgPiBjY2VsbEhlaWdodCkgeyBjY2VsbEhlaWdodCA9ICQodGhpcykuaGVpZ2h0KCk7IH1cbn0pO1xuY29uc29sZS5sb2coY2NlbGxIZWlnaHQpO1xuJChcIi5mbGlja2l0eS12aWV3cG9ydFwiLHRoaXMpLmhlaWdodChjY2VsbEhlaWdodCsxMCk7XG4gIH0pO1xuXG5qUXVlcnkoXCIuZmxpY2tcIikuZmxpY2tpdHkoe1xuICBjZWxsQWxpZ246ICdsZWZ0JyxcbiAgY29udGFpbjogdHJ1ZSxcbiAgd3JhcEFyb3VuZDogdHJ1ZSxcbiAgYXV0b1BsYXk6IHRydWUsXG4gIHByZXZOZXh0QnV0dG9uczogZmFsc2UsXG4gIHBhdXNlQXV0b1BsYXlPbkhvdmVyOiBmYWxzZSxcbn0pOyIsImdsb2JhbENvbmRpdGlvbnNSZXN1bHQiOnRydWV9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOmZhbHNlfSx7ImlkIjoyLCJuYW1lIjoib3h5X2R5bmFtaWNfbGlzdCIsIm9wdGlvbnMiOnsiY3RfaWQiOjIsImN0X3BhcmVudCI6MjE0LCJzZWxlY3RvciI6Il9keW5hbWljX2xpc3QtNDU2LTUiLCJvcmlnaW5hbCI6eyJxdWVyeV9wb3N0X3R5cGVzIjpbInBvc3QiXSwiZmxleC1kaXJlY3Rpb24iOiJ1bnNldCIsImRpc3BsYXkiOiJibG9jayIsImFsaWduLWl0ZW1zIjoiY2VudGVyIiwianVzdGlmeS1jb250ZW50IjoiY2VudGVyIiwidGV4dC1hbGlnbiI6ImNlbnRlciIsInF1ZXJ5X3RheG9ub21pZXNfYW55IjpbXSwicXVlcnlfdGF4b25vbWllc19hbGwiOltdLCJxdWVyeV9hdXRob3JzIjpbXSwicXVlcnlfYXJncyI6InBvc3RfdHlwZT1wb3N0JnBvc3RzX3Blcl9wYWdlPTYmbm9fZm91bmRfcm93cz10cnVlJm5vcGFnaW5nPXRydWUiLCJ3cF9xdWVyeSI6Im1hbnVhbCIsInBhZ2luYXRlX3dyYXBfYWxpZ25tZW50IjoiZmxleC1lbmQiLCJ3aWR0aCI6IjEwMCIsImhlaWdodC11bml0IjoiYXV0byIsImhlaWdodCI6IiJ9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImNsYXNzZXMiOlsiZmxpY2siXX0sImNoaWxkcmVuIjpbeyJpZCI6MywibmFtZSI6ImN0X2Rpdl9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjMsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiJkaXZfYmxvY2stNDU3LTUiLCJvcmlnaW5hbCI6eyJhbGlnbi1pdGVtcyI6ImNlbnRlciIsInRleHQtYWxpZ24iOiJjZW50ZXIiLCJmbGV4LWRpcmVjdGlvbiI6ImNvbHVtbiIsImRpc3BsYXkiOiJmbGV4IiwianVzdGlmeS1jb250ZW50IjoiZmxleC1zdGFydCIsIndpZHRoLXVuaXQiOiIlIiwid2lkdGgiOiIyNSIsInBhZGRpbmctbGVmdCI6IjUiLCJwYWRkaW5nLXJpZ2h0IjoiNSIsImhlaWdodC11bml0IjoiYXV0byIsImhlaWdodCI6IiJ9LCJhY3RpdmVzZWxlY3RvciI6ImNhcm91c2VsLWNlbGwiLCJjbGFzc2VzIjpbImNhcm91c2VsLWNlbGwiXSwibWVkaWEiOnsicGhvbmUtbGFuZHNjYXBlIjp7Im9yaWdpbmFsIjp7IndpZHRoIjoiNTAiLCJ3aWR0aC11bml0IjoiJSJ9fX19LCJjaGlsZHJlbiI6W3siaWQiOjQsIm5hbWUiOiJjdF9saW5rIiwib3B0aW9ucyI6eyJjdF9pZCI6NCwiY3RfcGFyZW50IjozLCJzZWxlY3RvciI6ImxpbmstNTkzLTE4MzMiLCJvcmlnaW5hbCI6eyJ1cmwiOiJbb3h5Z2VuIGN0X3NpZ25fc2hhMjU2PSc4NGJiMTljZjUxOTg4ZWJmYWZjZDA2NTcxZjE3MjE1ZDAzNDZlNzE3YWMwMDZmNDMxYjcwNjk2NDNmODY3OGFiJyBkYXRhPSdwZXJtYWxpbmsnIF0ifSwibmljZW5hbWUiOiJJbWFnZSIsImNsYXNzZXMiOlsic2xpZGVyaW1nIl0sImFjdGl2ZXNlbGVjdG9yIjoic2xpZGVyaW1nIn0sImNoaWxkcmVuIjpbeyJpZCI6NSwibmFtZSI6ImN0X2ltYWdlIiwib3B0aW9ucyI6eyJjdF9pZCI6NSwiY3RfcGFyZW50Ijo0LCJzZWxlY3RvciI6ImltYWdlLTQ2MC01Iiwib3JpZ2luYWwiOnsic3JjIjoiW294eWdlbiBjdF9zaWduX3NoYTI1Nj0nMWZlYmMyZDY3MzZhZDY2Yjg2N2JhMDBjM2FhMDU4NTYzYmQ5YmRmY2YwZWMwM2VkNjIwZGExNzA4MWQzNmViMicgZGF0YT0nZmVhdHVyZWRfaW1hZ2UnIHNpemU9J21lZGl1bV9sYXJnZScgXSIsInNyY2R5bmFtaWMiOnRydWUsImdsb2JhbENvbmRpdGlvbnNSZXN1bHQiOnRydWV9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOmZhbHNlfV0sImRlcHRoIjo3fSx7ImlkIjo2LCJuYW1lIjoiY3RfaGVhZGxpbmUiLCJvcHRpb25zIjp7ImN0X2lkIjo2LCJjdF9wYXJlbnQiOjMsInNlbGVjdG9yIjoiaGVhZGxpbmUtNDczLTUiLCJvcmlnaW5hbCI6eyJ0YWciOiJoMiIsImZvbnQtc2l6ZSI6IjI1IiwibWFyZ2luLXRvcCI6IjE1In0sImFjdGl2ZXNlbGVjdG9yIjoiY2Fyb3VzZWxIZWFkIiwiY2xhc3NlcyI6WyJjYXJvdXNlbEhlYWQiXSwibmljZW5hbWUiOiJCbG9nIFRpdGxlIiwiY3RfY29udGVudCI6IjxzcGFuIGlkPVwiY3QtcGxhY2Vob2xkZXItN1wiPjwvc3Bhbj4ifSwiY2hpbGRyZW4iOlt7ImlkIjo3LCJuYW1lIjoiY3Rfc3BhbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjcsImN0X3BhcmVudCI6Niwic2VsZWN0b3IiOiJzcGFuLTQ4MC01IiwiY3RfY29udGVudCI6IltveHlnZW4gY3Rfc2lnbl9zaGEyNTY9J2FjNmVmNmQ5YzIxNzZiM2UyNTYzOTI5M2ViODQ0NmIxMjBmZDJmYjY1OGJmZDY0NTMyMGE3NTY5NDlhYzY3ZTgnIGRhdGE9J3RpdGxlJyBsaW5rPSdwZXJtYWxpbmsnIF0ifSwiZGVwdGgiOmZhbHNlfV0sImRlcHRoIjpmYWxzZX0seyJpZCI6OCwibmFtZSI6ImN0X3RleHRfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjo4LCJjdF9wYXJlbnQiOjMsInNlbGVjdG9yIjoidGV4dF9ibG9jay00OTctNSIsIm9yaWdpbmFsIjp7ImNvbG9yIjoiIzAwMDAwMCIsIm1hcmdpbi10b3AiOiIxNiJ9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsIm5pY2VuYW1lIjoiQmxvZyBFeGNlcnB0IiwiY3RfY29udGVudCI6IjxzcGFuIGlkPVwiY3QtcGxhY2Vob2xkZXItOVwiPjwvc3Bhbj4ifSwiY2hpbGRyZW4iOlt7ImlkIjo5LCJuYW1lIjoiY3Rfc3BhbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjksImN0X3BhcmVudCI6OCwic2VsZWN0b3IiOiJzcGFuLTUwNC01IiwiY3RfY29udGVudCI6IltveHlnZW4gY3Rfc2lnbl9zaGEyNTY9J2JjN2UyMmNkMzk2YzdjNDdmODVhZWU5NmQ5ZjA0ZDUyMTQyMTNhM2QwMDY5NDNmMThhNGZiZjRmY2Y0NjAwZjAnIGRhdGE9J2V4Y2VycHQnIF0ifSwiZGVwdGgiOmZhbHNlfV0sImRlcHRoIjpmYWxzZX0seyJpZCI6MTAsIm5hbWUiOiJjdF9saW5rX2J1dHRvbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjEwLCJjdF9wYXJlbnQiOjMsInNlbGVjdG9yIjoibGlua19idXR0b24tNTExLTUiLCJvcmlnaW5hbCI6eyJ1cmwiOiJbb3h5Z2VuIGN0X3NpZ25fc2hhMjU2PSc4NGJiMTljZjUxOTg4ZWJmYWZjZDA2NTcxZjE3MjE1ZDAzNDZlNzE3YWMwMDZmNDMxYjcwNjk2NDNmODY3OGFiJyBkYXRhPSdwZXJtYWxpbmsnIF0iLCJtYXJnaW4tYm90dG9tLXVuaXQiOiJhdXRvIiwibWFyZ2luLWJvdHRvbSI6IjAiLCJmbGV4LWRpcmVjdGlvbiI6InVuc2V0IiwiZGlzcGxheSI6ImlubGluZS1ibG9jayJ9LCJjbGFzc2VzIjpbImdsb2JhbGJ0biJdLCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsIm5pY2VuYW1lIjoiUmVhZCBNb3JlIEJ1dHRvbiIsImN0X2NvbnRlbnQiOiJSZWFkIE1vcmUifSwiZGVwdGgiOmZhbHNlfV0sImRlcHRoIjo2fV0sImRlcHRoIjo1fV19XSwiY2xhc3NlcyI6eyJmbGljayI6eyJvcmlnaW5hbCI6eyJoZWlnaHQtdW5pdCI6InB4IiwiZmxleC1kaXJlY3Rpb24iOiJ1bnNldCJ9fSwiY2Fyb3VzZWwtY2VsbCI6eyJtZWRpYSI6eyJwaG9uZS1sYW5kc2NhcGUiOnsib3JpZ2luYWwiOnsid2lkdGgtdW5pdCI6IiUifX19LCJvcmlnaW5hbCI6eyJ3aWR0aC11bml0IjoiJSIsImhlaWdodC11bml0IjoiYXV0byIsImZsZXgtZGlyZWN0aW9uIjoiY29sdW1uIiwiZGlzcGxheSI6ImZsZXgiLCJhbGlnbi1pdGVtcyI6ImNlbnRlciIsInRleHQtYWxpZ24iOiJjZW50ZXIiLCJqdXN0aWZ5LWNvbnRlbnQiOiJmbGV4LXN0YXJ0Iiwid2lkdGgiOiIyNSIsInBhZGRpbmctdG9wIjoiNSIsInBhZGRpbmctbGVmdCI6IjUiLCJwYWRkaW5nLXJpZ2h0IjoiNSIsInBhZGRpbmctYm90dG9tIjoiNSJ9fSwic2xpZGVyaW1nIjp7Im9yaWdpbmFsIjp7fX0sImNhcm91c2VsSGVhZCI6eyJvcmlnaW5hbCI6e319LCJnbG9iYWxidG4iOnsia2V5IjoiZ2xvYmFsYnRuIiwibWVkaWEiOnsicGhvbmUtcG9ydHJhaXQiOnsib3JpZ2luYWwiOnsiYnV0dG9uLXNpemUiOiI4In19fSwib3JpZ2luYWwiOnsiZm9udC1mYW1pbHkiOnsiMCI6Imdsb2JhbCIsIjEiOiJUZXh0In0sInBhZGRpbmctdG9wIjoiMjAiLCJwYWRkaW5nLWxlZnQiOiIxMCIsInBhZGRpbmctYm90dG9tIjoiMjAiLCJwYWRkaW5nLXJpZ2h0IjoiMTAiLCJiYWNrZ3JvdW5kLWNvbG9yIjoiY29sb3IoMzkpIiwiY29sb3IiOiIjZmZmZmZmIiwiZm9udC1zaXplIjoiMjAiLCJ0ZXh0LWFsaWduIjoiY2VudGVyIiwibGluZS1oZWlnaHQiOiIxLjIiLCJsZXR0ZXItc3BhY2luZyI6IjMiLCJmb250LXdlaWdodCI6IjcwMCIsIm1hcmdpbi10b3AiOiIwIiwiYm90dG9tIjoiMCIsImZsZXgtZGlyZWN0aW9uIjoidW5zZXQiLCJtYXJnaW4tbGVmdCI6IjAiLCJtYXJnaW4tcmlnaHQiOiIwIiwibWFyZ2luLWJvdHRvbSI6IjAifX19LCJjb2xvcnMiOnsiMzkiOnsiaWQiOjM5LCJuYW1lIjoiIzAwNzRkYiIsInZhbHVlIjoiIzAwNzRkYiJ9fX0=

Customization

The carousel script can also be customized. It's just incredibly easy to change the style of the arrows, or dots: https://flickity.metafizzy.co/style.html
Try to modify those from the Slider element, you can also try out different options to make it look different: https://flickity.metafizzy.co/options.html

If you prefer other carousels over flickity you can try the below:

Ads Temporarily Disabled

Scope (How the Integration Came to be)

I have recently migrated all my posts from DIVI builder to Gutenberg and plan to use it going forward. Recently diving into Oxygen Builder I found some mismatches in the CSS and they were bugging me a lot. Being a curious new player in the field I wanted to fix it.

Version History

Version 1 - NOV 2019

The first set of integration work is live and is working flawlessly with few errors. Almost all the blocks were working correctly except the Embed of Facebook & Audio.

Version 2 - 10 FEB 2020

Updated it too look better on some cases.
Fixed Bug: Caption links and caption texts on images

Installation - Oxygen Template System

The Installation of this integration is fairly easy. One of the greatest feature in oxygen comes to play regarding this, Inner Content. Inner Content out of the box does not do anything but the mixing of code levels it up.

Steps

  1. Create New Template - No Design Inherits & in the others section toggle Inner Content. What this will do is capture everything that is passes the inner content but is not built with Oxygen Builder itself. Example if a page is made with Gutenberg only that will pass through this template nothing else.
  2. Go to Templates and Navigate to your Blog Post Template (Single Blog Post). Open the template in Oxygen.
  3. Once the Oxygen builder opens, click add and then add a section. Inside the section place a inner content element. This is the default system meant for Oxygen to work correctly. you should already have the inner content template. On the same section follow step 4.
  4. Add a Code Block Element to the section below inner content. Add the below codes to the code block respectively to get them working.

Codes

PHP & HTML

<?php
add_theme_support( 'responsive-embeds' );
add_theme_support( 'customize-selective-refresh-widgets' );
add_theme_support( 'wp-block-styles' );
add_theme_support( 'align-wide' );
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );
?>

CSS

.wp-block-preformatted {
display: block;
  font-family: Menlo, Consolas, monaco, monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: justify;
  margin: 1em 0;}

    
.wp-block-code {
	font-family: Menlo, Consolas, monaco, monospace;
	font-size: 14px;
	color: #23282d;
	padding: 0.8em 1em;
	border: 1px solid #e2e4e7;
	border-radius: 4px;
 	white-space: pre-wrap;
}

.wp-block-audio{
color: #23282d;
	font-size: $default-font-size;
  text-align: center;}

pre.wp-block-verse {
  white-space: pre-wrap;
}

.wp-block-image figcaption {
  overflow-wrap: break-word;
  text-align: center;
  font-size: x-small;
}

The above should work for all Oxygen versions.

Ads Temporarily Disabled

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram