「修改商品頁的按鈕(加入購物車、直接購買)」
• 可根據商品性質調整按鈕文字，例如改為「立即預購」「搶購限量版」「加入體驗箱」，更貼近活動情境，有效激發點擊意願與緊迫感
• 修改按鈕顏色與樣式，能與整體商品頁設計、品牌色彩保持一致，提升網站質感與專業度，讓每個操作都變成視覺體驗的一部分
✎ 重點拆解：
一、「修改商品頁的按鈕(加入購物車、直接購買)」設定路徑
二、「修改商品頁的按鈕(加入購物車、直接購買)」語法
一、「修改商品頁的按鈕(加入購物車、直接購買)」設定路徑
設定路徑：版面>自訂CSS商店樣式。
二、「修改商品頁的按鈕(加入購物車、直接購買)」語法
/*電腦版*//*商品頁*/
/*加入購物車*/
body.product-product a#button-cart{
background:deepskyblue; /*背景顏色*/
color:linen; /*文字顏色*/
border:5px solid #c2e3ef !important; /*框線設定*/
}
/*直接購買*/
body.product-product #button-quick-checkout{
background:deepskyblue; /*背景顏色*/
color:linen; /*文字顏色*/
border:5px solid #c2e3ef; /*框線設定*/
}
/*手機版*//*商品頁*/
@media only screen and (max-width: 768px), only screen and (max-device-width: 667px) and (min-device-width: 375px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 414px) and (orientation: portrait) {
/*加入購物車*/
body.product-product a#button-cart{
background:#ff0068; /*背景顏色*/
color:linen; /*文字顏色*/
border:5px solid #c2e3ef !important; /*框線設定*/
}
/*直接購買*/
body.product-product #button-quick-checkout{
background:#ff8300; /*背景顏色*/
color:linen; /*文字顏色*/
border:5px solid #c2e3ef; /*框線設定*/
}
}
----------------------------------------------------------
【同場加映】
/*下一步|計算運費*/
.checkout-cart #button-next-checkout {
background:#000;
border-color:#000;
}
/*下一步｜進行結帳*/
#terms-wrapper #button-payment-method{
background:#000;
border-color:#000;
}