divienginesupport

<script type="text/javascript">
  
  jQuery(document).ready(function( $ ) { // When jQuery is ready
  
  function check_from_top_de(){ // Create our function
    var scroll = $(window).scrollTop(); // Check scroll distance
    if (scroll >= 300) { // If it is equal or more than 300 - you can change this to what you want
      $("#your-target-element").addClass("class-to-be-added"); // Add custom class to body
    } else {
      $("#your-target-element").removeClass("class-that-we-added"); // When scrolled to the top, remove the class

divienginesupport

.fixed-header {
	position: fixed;
	width: 100%;
	-webkit-animation: fadein 1s ease-in-out; 
	-moz-animation: fadein 1s ease-in-out;
	animation: fadein 1s ease-in-out;   
}

@keyframes fadein {
	from { opacity: 0; }

divienginesupport

<script>
// Run after document has loaded...
jQuery(document).ready(function($){
  // Do something on waypoint...
  $('#module-one').waypoint(function(){ //Once we have scrolled to the first module, we execute our function
    $('#one').fadeIn(); // Fade in the first blurb
		$('#two').fadeOut(); // Fade out the second blurb in case the user is scrolling up
  }, {offset: '25%'}); // This checks to see if #module-one element is at least 25% scrolled into view
  $('#module-two').waypoint(function(){ //Once we have scrolled to the second module, we execute our function
    $('#two').fadeIn(); // Fade in the second blurb

divienginesupport

<script type="text/javascript">
  
  jQuery(document).ready(function( $ ) { // When jQuery is ready
  
  function check_from_top_de(){ // Create our function
    var scroll = $(window).scrollTop(); // Check scroll distance
    if (scroll >= 300) { // If it is equal or more than 300 - you can change this to what you want
      $("#main-header").addClass("change-bg-color"); // Add custom class to body which will change the color
    } else {
      $("#main-header").removeClass("change-bg-color"); // When scrolled to the top, remove the class which changes the color back

divienginesupport

.change-bg-color {
	background-color: springGreen!important;
}

divienginesupport

//Setting up Woocommerce "Add to Cart" icon button and adding the quantity field.

//Add-to-Cart Button
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

//Change the Add to Cart text to basket Icon
add_filter( 'woocommerce_product_add_to_cart_text', 'woocommerce_custom_product_add_to_cart_text' );  
function woocommerce_custom_product_add_to_cart_text() {
    return __( '', 'woocommerce' );
}

divienginesupport

/*CSS to make sure the Quantity and Add to cart button are next to each other*/

.product .cart {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	margin-top: 10px;
}

.product .cart button[type="submit"] {

divienginesupport

jQuery(document).ready(function($) {
  function moveproddetails() {
    var shop_module = $('.divi-engine-custom-overlay'),
      shop_item = shop_module.find('li.product');
    shop_item.each(function() { // Runs through each loop item in the shop
      var product_title = $(this).find('.woocommerce-loop-product__title'), // Finds the Product Title
        product_price = $(this).find('span.price'), // Finds the Product Price
        product_overlay = $(this).find('.et_overlay'); // Finds the Divi Overlay
      product_title.detach(); // Detaches the Product Title
      product_price.detach(); // Detaches the Product Title

divienginesupport

<style>

  /* Hover Price and Title in overlay */

  .et_overlay .woocommerce-loop-product__title,
  .et_overlay .price, 
  .et_overlay .loop-title-item,
  .et_overlay .loop-title-price {
    text-align: center; /* Centers the Title and Price */
    position: absolute;

divienginesupport

<link rel="stylesheet" type="text/css" href="/wp-content/themes/[your child theme folder]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/[your child theme folder]/slick/slick-theme.css"/>

<script type="text/javascript" src="/wp-content/themes/[your child theme folder]/slick/slick.min.js"></script>