WordPressテーマ「EGO」カスタマイズtips集

<header class="p-entry-product__header">
		<h1 class="p-entry__title p-entry-product__title"><?php the_title(); ?></h1>
		<div class="p-entry-product__header-meta">
<?php
woocommerce_template_single_rating();
?>
			<a class="p-entry-product__header-like p-article-like js-product-toggle-like<?php if ( is_liked( $post->ID ) ) echo ' is-liked'; ?>" data-post-id="<?php echo $post->ID; ?>"></a>
		</div>
	</header>

<!--<header></header>の直後に入れる-->
<div class="sample"><?php
/**
 * Hook: woocommerce_before_single_product_summary.
 *
 * @hooked woocommerce_show_product_images - 20
 */
do_action( 'woocommerce_before_single_product_summary' );
?>
	<div class="p-entry-product__middle">
		<div class="p-entry-product__content summary entry-summary">
<?php
/**
 * Hook: woocommerce_single_product_summary.
 *
 * @hooked woocommerce_template_single_excerpt - 20
 * @hooked woocommerce_template_single_sharing - 50
 * @hooked WC_Structured_Data::generate_product_data() - 60
 */
do_action( 'woocommerce_single_product_summary' );
?>
		</div>
		<div class="p-entry-product__carts" id="cart">
			<div class="p-entry-product__cart">
<?php
woocommerce_template_single_price();
woocommerce_template_single_add_to_cart();
woocommerce_template_single_meta();
?>
			</div>
		</div>
	</div>
</div>

/*商品ページカスタマイズ*/
@media (min-width: 768px){
  .p-entry-product__main.has-single-cart .p-entry-product__middle{
    display: flex;
    flex-direction: column-reverse; /*抜粋文とカートエリアを逆転*/
    flex-wrap: nowrap;
  }
  .p-entry-product__main.has-single-cart .p-entry-product__middle .p-entry-product__content,
  .p-entry-product__main.has-single-cart .p-entry-product__middle .p-entry-product__carts{
    max-width: 100%;
  }
  .sample{
    display: flex;
  }
  .sample > div:first-child{
    flex: 2; /*画像とカートエリアの横幅を2:1に*/
    padding-right: 50px;
    margin: 0;
  }
  .sample > div:last-child{
    flex: 1; /*画像とカートエリアの横幅を2:1に*/
  }
  .p-entry-product__share{
    margin-top: 36px;
  }
  .wc-tabs-wrapper{
    margin-top: 120px;
  }
  /*追加*/
  .p-entry-product__subimages-inner{
    flex-wrap: wrap;
  }
  .p-entry-product__subimages-inner .p-entry-product__subimage {
    margin: 10px 10px 10 0!important;
  }
}

/*ショップページの3番めのタブを非表示にする*/
.p-archive03__sort-filter__item:nth-of-type(3){
    display: none;
}

.p-sidebar {
	position: fixed; 
	top: 100px;
	background: rgba(255, 255, 255, 0.8);
	z-index: 999; 
}

.p-sidebar *, .p-sidebar *::before, .p-sidebar *::after {
    background-color: transparent !important;
}

@media (min-width: 768px) {
  .p-sidebar {
    display: block;
  }
}

@media screen and (max-width: 768px) {
    .p-sidebar {
        display: none;
    }
}

<script>
jQuery(function(){
   jQuery('div[id^="cb_"]').click(function() {
      var speed = 800;
      var href= jQuery(this).attr("href");
      var target = jQuery(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>

.page-wrap {
  display: flex;
  flex-wrap: wrap;
}

.custom-sidebar {
  display: none;
  width: 20%;
  order: -1;
  margin-right: 0px;
}

.l-main {
  width: 100%;
  margin-left: 0px;
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .home .custom-sidebar {
    display: block;
    width:20%;
    margin-right: 10px;
  }
  .home .l-main {
    width: 75%;
    margin-left: 10px;
  }

  .not-home .custom-sidebar {
    display: none;
  }
  .not-home .l-main {
    width: 100%;
    margin: 0;
  }
}

<?php
global $dp_options;
if ( ! $dp_options ) $dp_options = get_design_plus_options();

get_header();
?>

<div class="page-wrap <?php echo is_front_page() ? 'home' : 'not-home'; ?>">
  <main class="l-main">
  <?php
  get_template_part( 'template-parts/header-contents' );
  get_template_part( 'template-parts/contents-builder' );
  ?>
  </main>
  
<aside class="p-sidebar l-secondary custom-sidebar">
<div class="p-widget p-widget-sidebar tcdw_product_category_list_widget" id="tcdw_product_category_list_widget-8">
<!--サイドバーの内容-->
</aside>
</div>

<?php
get_footer();
?>

add_filter( 'woocommerce_ship_to_different_address_checked', '__return_false' ); 

@media (min-width: 992px){
  .p-global-nav .sub-menu .current-menu-item:not(:hover) a{
    background-color: #ffffff;
    color: #333333!important;
  }
}