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.
- Add a codeblock
- Insert the follwing into "PHP & HTML":
<div class="cart-count"> <?php echo WC()->cart->get_cart_contents_count();?> </div>
- Install you favourite code snippets plugin like - Advanced Scripts
- Create a New PHP Snippet / PHP Script
- Insert the following into the "Code"-section:
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;
});- 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.
Summary
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 Owl Carousel using Code Snippets
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.
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&posts_per_page=6&no_found_rows=true&nopaging=true
In the layout option make child elements stack horizontally with top vertical alignment and center horizontal alignment.
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 > .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:
Related Posts
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.
Summary
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.
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&posts_per_page=6&no_found_rows=true&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
POWER BI 101: Basics you should Know
Microsoft Power BI is a business analytics tool with an easy-to-use interface that lets customers create their own reports and dashboards. Microsoft created the service.
Read More
What's an ATS-Compliant Resume? 5 tips to get started.
Applicant Tracking System (ATS) bots sort, analyze, and filter candidates. Following norms and specifications can help your resume stand out in an AI-based system.
Read More
WooCommerce: Show Cart Total Ajax
Use Oxygen Code Block & PHP Snippets to show cart total with ajax.
Read More
Litespeed Cache Exclusions for Oxygen Builder
A tutorial on Exclusions to be initiated in Litespeed Cache in order for Oxygen to work properly.
Read More
Owl Carousel Slider in Oxygen - Easy Method
A tutorial to implement a post carousel slider using owl carousel as it is the best option to implement as it has a very small footprint and is easy to implement.
Read More
Flickity Carousel Slider in Oxygen - Easy Method
A tutorial to implement a post carousel slider using flickity as it is the best option to implement as it has a very small footprint and is easy to implement.
Read More
Configuring Burp Suite With Android Nougat 2020
From Android Nougat the Burp Suite CA Certificate no longer works installed no longer works. Here is a guide to solve the problem
Read More
Oxygen dominating DIVI! Why I made the shocking switch?
Oxygen is a great plugin to use but I was a DIVI fanboy learn why I switched from DIVI to Oxygen and what benefits I found from switching the page builders.
Read More
6 Tips to a Great Web Portfolio
Having a great web portfolio is a must, even though you may have a CV / Resume, a portfolio helps the most. Read my tips to make a great web portfolio .
Read More
Better than Canva: GlorifyApp (No. 1 Alternative)
Canva is a great tool but what if there was something better Glorifyapp is more appealing to every designers dream.
Read More
Backdoor Attack - 60 Million WordPress Sites at Risk
According to WordPress, over 60 million people have chosen the software and they are vulnerable to backdoor attack. Take precautionary steps now.
Read More
Oxygen + Gutenberg Blocks - A Simple Integration
Oxygen Builder's integration with Gutenberg blocks for better output in the fronted made with oxygen template system.
Read More
Excel in Workplace
In an office, the best way to survive is being good with Microsoft Excel which gives an edge in the workplace and helps stand out from the crowd.
Read More
Quadmenu an affordable premium WordPress Mega menu plugin
QuadMenu is the best powerful WordPress mega menu plugin to amplify your theme to give your users a great experience with its responsiveness and reliability.
Read MoreHydrogen 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:
Related Posts
Ads Temporarily Disabled
Table of Contents
So I wanted to try out Web App and Android App penetration testing the first software I was introduced to was BURP Suite, best in class industry standard tool for Penetration Testing.
Background
It had crossed me as I remember when Pathao App was accused of stealing personal data (Accusation was proved and necessary actions were taken) BURP was used for testing. So I went on a journey to configure BURP for android.
In Android Nougat, we’ve changed how Android handles trusted certificate authorities (CAs) to provide safer defaults for secure app traffic. Most apps and users should not be affected by these changes or need to take any action. The changes include:
https://android-developers.googleblog.com/2016/07/changes-to-trusted-certificate.html
Ads Disable Temporarily
That was the most painful task to do as though burp was easy setup the main problem was to get the certificate working inside Android 7+. I had a Android 9 and the problem with this version (I said problem but its a benefit if you are a general user) was that it did not allow for CA Certificates that are user installed to allow proxy connections that Burp needed in order to work.
The phone I used was a Xiaomi Mi 6x Rooted with Magisk, it is currently running MIUI 11.2 Android Version 9 - Pie.
As expected I followed all steps denoted in their website: Link, I got through some of the basic steps. Then came the most painful part getting the certificate to android. The Steps over at: Configuring Burp Suite With Android Nougat are really great but the current needs are different as android is ever evolving.
Install the Burp Suite CA as a system-level CA on the device. My recommendation for the easiest solution, but does require a rooted device. Also added benefit of not having to set a lockscreen PIN 🙂
Basic requirements
Though I say basic but its the most crucial element to succeeding in solving this simple problem.
The first thing you will need is an android device, it has to be rooted. (Use Magisk as it simply the best i have seen so far due to its ability to hide from apps)
Second you need a Linux Machine - I use Kali Linux on a virtual Machine to do my task.
Steps
Step 1: Start Burp Suite and add a new proxy listener. Make the proxy listener a Specific Address
Step 2: Export the Certificate and the Certificate KEY
First Click on Import / Export Certificate then first click on export in DER Format and Save file as cacert.der (you can use any name but I am using this and will be continuing to use this as reference name) then again do the same but this time select private key in DER format and save it as cacertKey.der . I stored them at root for easier manipultaion.
Ads Disable Temporarily
Step 3: Open Terminal and Use the following codes
openssl rsa -inform der -in cacertKey.der -outform pem -out cacertKey.pem
the above code will tell openssl to change the key from DER format to PEM format. We need this in order to sign the conversion of our cacert.der certificate to cacert.pem but the the key.
openssl x509 -inform der -in cacert.der -signkey cacertKey.pem -days 730 -outform der -out cacert2.der
The code that worked next would be telling openssl to create a new certificate in der format and save it as cacert2.der this is done in order to keep the original and the edited version. The code above also changes the validity of the certificate which is needed for apps to function properly. A typical certificate would last about 29 months so I gave about 730 days that is equivalent to 2 years or 24 Months. The signkey is our key we have converted this ensures that we are able to import it back to burp as we changed the date of issue and expiry. Next, we will convert the original to a pem certificate.
openssl x509 -inform der -in cacert.der -signkey cacertKey.pem -days 730 -outform pem -out cacert2.pem
This is needed for the android system which reads pems as a valid certificate. After the certificate is generated we will use the below 2 codes
openssl x509 -inform pem -in cacert.pem -subject_hash_old |head -1 cp cacert2.pem <Hash>.0
The first code will provide a result such as below:
The <Hash> for me is 9a5ba575. Up execution of the next code a new file will be generated with the hash and extension of zero.
Step 4: Copy the Cacert2.der and the <hash>.0 file over to android with any tools or method of your liking.
Ads Disable Temporarily
Step 5: Copy the <hash>.0 to the folder /system/etc/security/cacerts/
my preferred file manager for this is Mixplorer.
Step 6: Follow the steps over at Burp Suite - Link, use the file cacert2.der for the task and then proceed to next step
Step 7: Import into burp the Cacert2.der using the old der key.
Viola All steps complete now you can start using BURP Suite with your android device.
Raw Codes
openssl rsa -inform der -in cacertKey.der -outform pem -out cacertKey.pem
openssl x509 -inform der -in cacert.der -signkey cacertKey.pem -days 730 -outform der -out cacert2.der
openssl x509 -inform der -in cacert.der -signkey cacertKey.pem -days 730 -outform pem -out cacert2.pem
openssl x509 -inform pem -in cacert.pem -subject_hash_old |head -1
cp cacert2.pem <Hash>.0Related Topics to Read
Backdoor Attack - 60 Million WordPress Sites at Risk
Ads Temporarily Disabled