Skip to content

Instantly share code, notes, and snippets.

@taciara
Created October 18, 2022 22:33
Show Gist options
  • Save taciara/bf8323d27d8ed5321ad4feccb1b0dd98 to your computer and use it in GitHub Desktop.
Save taciara/bf8323d27d8ed5321ad4feccb1b0dd98 to your computer and use it in GitHub Desktop.
accordion into acf to page single products
<?php
/**
* @author Taciara Furtado <contato@taciara.com.br>
* @version 1.0.0
*/
add_action( 'woocommerce_after_single_product', 'site_add_accordion_products', 55 );
function site_add_accordion_products () {
global $product;?>
<?php if( have_rows('conteudo_complementar_produtos') ):?>
<div id="accordion">
<?php while( have_rows('conteudo_complementar_produtos') ) : the_row();?>
<h3>
<?php the_sub_field('titulo');?>
<span class="icon-title icon-plus">+</span>
<span class="icon-title icon-minus">-</span>
</h3>
<div><?php the_sub_field('texto');?></div>
<?php endwhile;?>
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
<style>
#accordion { }
#accordion .ui-accordion-header { border: none; padding: 10px 20px; font-weight: 600; font-size: 21px; background: transparent; border-bottom: 1px solid #ccc; border-radius: 0; }
#accordion .ui-accordion-header .ui-accordion-header-icon{display:none !important;}
#accordion .ui-accordion-header span.icon-title { float: right; width: 32px; text-align: center; }
#accordion .ui-accordion-header:hover { }
#accordion .ui-accordion-header[aria-selected="true"] { color: #333; background: transparent; }
#accordion .ui-accordion-header[aria-selected="true"] span.icon-title{}
#accordion .ui-accordion-header[aria-selected="true"] span.icon-title.icon-plus{display: none;}
#accordion .ui-accordion-header[aria-selected="true"] span.icon-title.icon-minus{display: block;}
#accordion .ui-accordion-header[aria-selected="false"] { color: #333; background: transparent; }
#accordion .ui-accordion-header[aria-selected="false"] span.icon-title{}
#accordion .ui-accordion-header[aria-selected="false"] span.icon-title.icon-plus{display: block;}
#accordion .ui-accordion-header[aria-selected="false"] span.icon-title.icon-minus{display: none;}
#accordion .ui-accordion-content {padding: 20px 20px;height: auto !important;border: none;border-bottom: 1px solid #ccc;}
#accordion .ui-accordion-content[aria-hidden="false"] { }
#accordion .ui-accordion-content[aria-hidden="true"] { }
</style>
<?php endif;?>
<?php }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment