์ ์ ์ธ ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง๊ฐ ์ง๋ฃจํด์ง์ จ๋์? WooCommerce ์น์ฌ์ดํธ๋ฅผ ์ํ ๊ณ ์ ํ ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง ํ ํ๋ฆฟ์ ๋ง๋ค ์ ์๋ค๋ฉด ์ด๋จ๊น์?
Elementor ๋ฐ Gutenberg์ ํธํ๋๋ WooCommerce ๋น๋์ธ ShopEngine์ Cart Table, Cart Total, Cross Sell, Return to Shop์ ํฌํจํ ์ฌ๋ฌ ์์ ฏ์ด ํจ๊ป ์ ๊ณต๋ฉ๋๋ค. ๋ง์ถคํ ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง ํ ํ๋ฆฟ์ ์์ฑํฉ๋๋ค.
๋ฐ๋ผ์ ๋ค์์ ์ํ ์ฅ๋ฐ๊ตฌ๋ ํ ํ๋ฆฟ์ ๋ง๋ค ์ ์์ต๋๋ค. ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ(์: ์์ด) ๋ฐ ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ์ผ๋ก ์ฐ๋ ์คํฌ๋ฆฝํธ(์: ์๋์ด) ๋ชจ๋์ ๋ํ ๋ค์ค ์ธ์ด(WordPress ์ง์). ์ด๋ ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง๋ฅผ ๋์ฑ ๋์ ์ด๊ณ ์ฌ์ฉ์ ์นํ์ ์ผ๋ก ๋ง๋๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
โจโจํ์ ํ๋ฌ๊ทธ์ธ:
๐๐์ต์์ง: ShopEngine ๋ค์ด๋ก๋
๐๐์์: ์๋ฆฌ๋ฉํฐ ๋ค์ด๋ก๋
๐๐์ฐ์ปค๋จธ์ค: WooCommerce ๋ค์ด๋ก๋
์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง ํ ํ๋ฆฟ์ฉ ShopEngine ์์ ฏ: ๋น ๋ฅธ ๊ฐ์ #
์์ ฏ | ๋ชฉ์ |
์นดํธ ํ ์ด๋ธ | ์ด๋ฏธ์ง, ์ด๋ฆ, ์๋(์ฆ๊ฐ ๊ฐ๋ฅ), ์๊ณ |
์ฅ๋ฐ๊ตฌ๋ ํฉ๊ณ | ์๊ณ, ๋ฐฐ์ก๋น, ์ด ์๊ธ, ๊ฒฐ์ ๋ด์ญ ํ์ |
๊ต์ฐจํ๋งค | ์ ํ์ ํ์ํ๋ ค๋ฉด |
์ผํ ๋ฒํผ์ผ๋ก ๋์๊ฐ๊ธฐ | ์ผํ์ ๊ณ์ |
์ฅ๋ฐ๊ตฌ๋ ๋น์ฐ๊ธฐ ๋ฉ์์ง | '์ฅ๋ฐ๊ตฌ๋๊ฐ ํ์ฌ ๋น์ด ์์ต๋๋ค' ๋ฉ์์ง ํ์ |
์ฅ๋ฐ๊ตฌ๋ ์ ๋ฐ์ดํธ | ์๋ก ์ ํํ ํญ๋ชฉ ์ ๋ฐ์ดํธ |
์ฅ๋ฐ๊ตฌ๋ ์ง์ฐ๊ธฐ | ๋ชจ๋ ํญ๋ชฉ ์ ๊ฑฐ |
์ฟ ํฐ๋ฒํผ | ์ฟ ํฐ ์ฝ๋๋ฅผ ์ ๋ ฅํ๋ ค๋ฉด |
ShopEngine์ผ๋ก ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง ํ ํ๋ฆฟ์ ๋ง๋๋ ๋ฐฉ๋ฒ โ 2๊ฐ์ง ์คํ์ผ #
์ด์ ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง ํ ํ๋ฆฟ์ ์์ฑํ๋ ๋จ๊ณ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค. Border Cart Style ๋ฟ๋ง ์๋๋ผ RTL(right to left) ์คํ์ผ์ ์ฌ์ฉํ์ฌ ์์ ๋ง์ ํ ํ๋ฆฟ์ ๋์์ธํ ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋์์ธ์ ๋ณด๊ธฐ ์ํด ํธ์ง๊ธฐ์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ชจ๋ ์ฌ์ด๋ฅผ ์ ํํ ํ์๊ฐ ์์ต๋๋ค.
์คํ์ผ 1 โ ํ ๋๋ฆฌ ์นดํธ ์คํ์ผ #
1๋จ๊ณ: ์ ์นดํธ ํ ํ๋ฆฟ ๋ง๋ค๊ธฐ #
- WordPress ๋์๋ณด๋์ ๋ก๊ทธ์ธํ ํ โShopEngineโ -> โ๋น๋ ํ ํ๋ฆฟโ
- ํด๋ฆญ "์๋ก์ด ๊ฑธ ๋ํ๋ค". ํ ํ๋ฆฟ ์ค์ ํญ์ด ๋ํ๋ฉ๋๋ค.
- ์ค์ "ํ ํ๋ฆฟ ์ด๋ฆ'์ ์ฐธ์กฐํ์ธ์. ๋ค์, ํ์ด์ง ์ ํ -> ์ฅ๋ฐ๊ตฌ๋๋ฅผ ์ ํํ์ธ์.
- ๋น์ ์ "ํ๋์ ์ธ" ๋ฒํผ์ ๋๋ฅด๊ฑฐ๋ ๊บผ์ง ์ํ๋ก ์ ์งํ์ธ์. ํ ํ๋ฆฟ ๋์์ธ ์๋ฃ ํ์๋ ๋ณ๊ฒฝ๋ ์ ์์ต๋๋ค.
- ์ ํ โ๋น ์ํ ๋์์ธโ ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง ์์ ฏ์ ์ฌ์ฉํ์ฌ ๋๋ง์ ๋์์ธ ๊ฐ๋ฐ
- ์ด์ ๋ค์์ ํด๋ฆญํ์ธ์. โElementor๋ก ํธ์งโ
2๋จ๊ณ: ๋ธ๋ก ๊ตฌ์กฐ ์ ํ #
๋ค์์ผ๋ก ์ผ์ชฝ์ ๋ชจ๋ ์์ ฏ์ด ํ์๋ฉ๋๋ค. ์ค๋ฅธ์ชฝ์์๋ ๋ธ๋ก ๊ตฌ์กฐ๋ฅผ ์ ํํด์ผ ํฉ๋๋ค. ๋น์ ์ ํ ์ ์์ต๋๋ค ๋์ด์ ๋๊ธฐ ๋์์ธ์ ๋ง๋๋ ์์ ฏ.
3๋จ๊ณ: ์ฅ๋ฐ๊ตฌ๋ ์์ ฏ์ผ๋ก ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง ํ ํ๋ฆฟ ๊พธ๋ฏธ๊ธฐ #
ShopEngine ์นดํธ ๋ธ๋ก์ผ๋ก ์ด๋ํ์ฌ ์ง์ ๋์์ธํ ์ ์์ต๋๋ค. ์ฌ๊ธฐ์์๋ ์ฅ๋ฐ๊ตฌ๋ ํ, ์ฅ๋ฐ๊ตฌ๋ ํฉ๊ณ, ๊ต์ฐจ ํ๋งค, ์ฅ๋ฐ๊ตฌ๋ ๋น์ฐ๊ธฐ ๋ฉ์์ง, ์์ ์ผ๋ก ๋์๊ฐ๊ธฐ ๋ฑ์ ํฌํจํ ์ผ๋ถ ์ง์ ๋ ShopEngine ์ฅ๋ฐ๊ตฌ๋ ์์ ฏ์ ์ป์ ์ ์์ต๋๋ค. ๋ค์ ์์ ฏ์ ๋๋๊ทธํ์ฌ ์ ํํ ์์ญ์ ๋์ผ๋ฉด ๋ฉ๋๋ค.
๋ํ ํค๋, ํ ์คํธ ํธ์ง๊ธฐ, ๋ฒํผ, ์ด๋ฏธ์ง ์์ ฏ ๋ฑ๊ณผ ๊ฐ์ Elementor์ ์์ ฏ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์ด๋ฅผ ์ฌ์ฉ์ ์ ์ํ๋ ๋ฐฉ๋ฒ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
4๋จ๊ณ: ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง ํ ํ๋ฆฟ ๊ฒ์ #
- ๋์์ธ์ ๋ง์น ํ ๋ค์์ ํด๋ฆญํ์ธ์. "์ ๋ฐ์ดํธ".
- ์ด์ ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง -> ์ํ๋ ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง๊ฐ ๊ทธ์ ๋ฐ๋ผ ํ์๋๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
์คํ์ผ 2 - RTL ์คํ์ผ #
RTL ์คํ์ผ ์นดํธ ํ์ด์ง ํ ํ๋ฆฟ์ ์์ฑํ๋ ์ ์ฐจ๋ ํ ๋๋ฆฌ ์นดํธ ์คํ์ผ๊ณผ ๋์ผํฉ๋๋ค. ์ค๋ฅธ์ชฝ ๋ฐฉํฅ์ผ๋ก ์์ํ๋ฉด ๋ฉ๋๋ค.
์ด ์คํ์ผ์ ์๋์ด, ์ฐ๋ฅด๋์ด, ํ๋ฅด์์์ด ๋ฑ๊ณผ ๊ฐ์ด ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ์ผ๋ก ์ฐ๋ ์ธ์ด์ ์ฃผ๋ก ์ ์ฉํฉ๋๋ค.
์ฐธ๊ณ : ์ฌ์ดํธ ์ธ์ด ์ค์ ์ ์ํ๋ ์ธ์ด๋ก ๋ณ๊ฒฝํ๋์ง ํ์ธํ์ธ์. ์ด๋ ์ค์ โ ์ผ๋ฐ โ โ์ฌ์ดํธ ์ธ์ดโ๋ฅผ ์ ํํ์ธ์.
๐๐์์ธํ ์์๋ณด๊ธฐ โ ShopEngine ํ ํ๋ฆฟ์์ RTL ๋ ์ด์์์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ
์ฌ์ ๊ตฌ์ถ๋ ShopEngine ์นดํธ ํ์ด์ง ํ ํ๋ฆฟ์ ์ฝ์ ํ๋ ๋ฐฉ๋ฒ #
์ฒ์๋ถํฐ ๋์์ธํ ์๊ฐ์ด ์๋์? ๊ด์ฐฎ์์!
ShopEngine์๋ 2 ์ฌ์ ๋น๋ Border Cart Style ๋ฐ RTL๊ณผ ๊ฐ์ ์ฅ๋ฐ๊ตฌ๋ ํ ํ๋ฆฟ.
- 1๋จ๊ณ์ฒ๋ผ ShopEngine์ ํ์ํ์ธ์. ๊ตญ๊ฒฝ ์นดํธ ์คํ์ผ
- ๋ค์์ ์ ํํ์ธ์. ํ ๋๋ฆฌ ์นดํธ ์คํ์ผ ๋๋ RTL ๋น ์ํ ๋์์ธ์ ์ ํํ๋ ๋์ ํ ํ๋ฆฟ
- ํด๋ฆญ โElementor๋ก ํธ์งโ
๋ค๋ฅธ ์์ ฏ์ ์ฌ์ฉํ๊ฑฐ๋ ๊ธฐ์กด ์์ ฏ์ ์ฌ์ ๋ ฌํ๊ฑฐ๋ ์์ ํ์ฌ ์ํ๋ ๋๋ก ์ฌ์ฉ์ ์ ์ํ ์๋ ์์ต๋๋ค.
- ํด๋ฆญ "์ ๋ฐ์ดํธ"
๊ทธ๋ผ ์ ๊ธฐ๋ค๋ฆฌ๊ณ ์๋ ๊ฑธ๊น์? ShopEngine ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง ํ ํ๋ฆฟ์ ์ฌ์ฉํ์ฌ ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง๋ฅผ ๋์ฑ ๋์ ์ผ๋ก ๋์์ธํ์ธ์.