スタイル・カスタマイズ

このプラグインフォルダ内にあるスタイルシート（wcex_widget_cart/css/wcex_widget_cart.css）を、ご利用のテーマフォルダにコピーすることで、ウィジェットやメッセージボックスのスタイルを変更することができます。

例えば、次のスタイルはメッセージボックスのスタイルを指定しており、カート投入時のメッセージ、削除時のメッセージ、完了した時のメッセージの3つがあります。それぞれ自由に設定することで、カートボタンを押したときのメッセージボックスを好みのスタイルにすることができます。

/* カート投入時メッセージボックス */
#wgct_alert.update_box {
    padding: 10px;
    height: 80px;
    width: 200px;
    border: 1px solid #CC6600;
    background-color: #FFF5E8;
    font-weight: bold;
    color: #003366;
    display: none;
}

/* 削除時メッセージボックス */
#wgct_alert.delete_box {
    padding: 10px;
    height: 80px;
    width: 200px;
    border: 1px solid #CC6600;
    background-color: #FFF5E8;
    font-weight: bold;
    color: #003366;
    display: none;
}

/* 完了メッセージボックス */
#wgct_alert.completion_box {
    padding: 10px;
    height: 80px;
    width: 200px;
    border: 1px solid #CC6600;
    background-color: #ECF0FF;
    font-weight: bold;
    color: #003366;
    display: none;
}


　

注意

wcex_widget_cart.css をテーマ内にコピーした際は、そのままですとウィジェット内の「清算する」のボタンの画像が読み込めなくなります。この様な場合は次のようにして対処してください。

ボタン画像ファイル（wcex_widget_cart/images/button1.png）を、テーマ内のimagesフォルダ（無ければ作成する）にコピーします。そして次セレクターのファイルのパスをこのように変更します。

#wdgctToCheckout a {
    line-height: 25px;
    font-weight: bold;
    color: #FFFFFF;
    background-image: url(./images/button1.png);
    background-repeat: no-repeat;
    text-align: center;
    display: block;
    height: 25px;
    width: 111px;
    margin-top: 8px;
    margin-right: auto;
    margin-left: auto;
    text-decoration: none;
}