商品一覧・個別ページ詳細

  • 著者:管理人
  • 記事の最終変更日:2024年8月25日

CSS

ダッシュボード>外観>カスタマイズ>追加CSSや、Scripts n Styles（プラグイン）等でコピペして使用します。

				
					/*ショップページ上部線除去（全デバイス）*/
.woocommerce .oceanwp-toolbar {
    border-top: 0px solid #eaeaea;
}
				
			
				
					/*ショップページのモバイルでは必ず1行1個になるため無意味な配列選択非表示*/
@media(max-width:767px){
nav.oceanwp-grid-list {
    display: none !important;
}
/*上を受けて空いたスペース削除*/
form.woocommerce-ordering {
    margin-top: 0 !important;
}
}
				
			
				
					/*商品クイックビュー時のコントローラー高さ調整*/
#owp-qv-wrap .flex-control-nav {
    bottom: -30px;
}
				
			
				
					/*商品クイックビュー時のアドカートボタン調整*/
.woocommerce button.button {
    padding: 12px 8px;
}
				
			
				
					/*商品ページギャラリー配置数倍へ*/
.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) {
    margin-right: 2%;
}
.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
    clear: none;
}
.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(8n) {
    margin-right: 0;
}
.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(8n+1) {
    clear: both;
}
.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
    width: 10.75%;
    margin-right: 2%;
}
				
			
				
					/*商品ページタブレイアウト調整（スマホ時に縦に並ぶの封じる。センター寄せはそのまま。PCは見た目変わらず）*/
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    justify-content: center;
}
				
			
				
					/*商品ページタブ上余白調整（モバイル時）*/
@media(max-width:799px){
.woocommerce div.product .woocommerce-tabs {
    padding-top:0px;
}
	.woocommerce div.product div.summary {
    margin-bottom:0;
}
.product_meta {
    border-bottom: 0px solid;
}
}
				
			
				
					/*「オプションを選択」ボタン文言変更*/
a.button.product_type_variable.add_to_cart_button.rtwpvs_add_to_cart.rtwpvs_ajax_add_to_cart {
    font-size: 0;
}
a.button.product_type_variable.add_to_cart_button.rtwpvs_add_to_cart.rtwpvs_ajax_add_to_cart:after {
    font-size: 12px;
    font-weight: 600;
    content: "バリエーションを選ぶ";
}
				
			
				
					/*虫眼鏡位置左右反転と背景透明化、ヘッダースティッキーとのz-index調整*/
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    right: 0;
    left: 10px;
	   background-color: transparent;
    z-index: 1;
}
				
			
				
					/*アイコン「プラス入り右向き」に変更（メニューバー常設検索アイコンとしての虫眼鏡との差別化。拡大「強調」鏡）*/
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
    display: block;
    content: url(/wp-content/uploads/2024/04/musimeganeplusright2.svg);
    width: 19px;
    text-indent: 0;
}
				
			
				
					/*セールバッジ位置調整（商品ページでは位置反転した虫眼鏡との重なりも防ぐ）*/
.woocommerce .has-product-nav span.onsale {
    top: 0.8rem !important;
}
.woocommerce span.onsale {
	border-radius: 20px;
}
@media(min-width:768px){
.woocommerce span.onsale {
    position: relative;
}
}
				
			
				
					/*商品ページで最下部までスクロールすると出てくる催促ボタン調整*/
.owp-floating-bar .product_price del .amount, .owp-floating-bar .product_price .amount, .owp-floating-bar .out-of-stock {
    color: #fff!important;
}
button.button.top {
    font-size: 0;
}
button.button.top:after {
    content: "バリエーションを選ぶ";
    font-size: 14px;
}
.woocommerce button.button {
    padding: 12px 12px;
}